.story-main-box .left.story-dialog-item .message-bubble {
  background: #fff;
  border: 1px solid #e2e2e2
}

.story-main-box .left.story-dialog-item .message-bubble::before {
  left: -7px;
  border-right-color: #e2e2e2
}

.story-main-box .left.story-dialog-item .message-bubble::after {
  left: -6px;
  border-right-color: #fff
}

.story-main-box .right.story-dialog-item .message-bubble {
  background: #1ed914;
  border: 1px solid #12c807
}

.story-main-box .right.story-dialog-item .message-bubble::before {
  right: -7px;
  border-left-color: #12c807
}

.story-main-box .right.story-dialog-item .message-bubble::after {
  right: -6px;
  border-left-color: #1ed914
}

.story-main-box .image-type.story-dialog-item .message-bubble {
  padding: 0;
  border-radius: 3px;
  border: none;
  overflow: hidden
}

.story-main-box .image-type.story-dialog-item .message-bubble > img {
  vertical-align: top;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

.story-main-box .story-dialog-item .dialog-comment-flag.count {
  color: #83879c;
  background: #dbdce6
}

.story-main-box .story-dialog-item .dialog-comment-flag.max-count {
  color: #fff;
  background: #ffbebe
}

.story-main-box .story-dialog-misc-item .text {
  color: #085a60;
  background: #dadada;
  border: 1px solid #dedede
}

.night-mode .story-main-box .story-dialog-item .message-bubble {
  color: #bebebe
}

.night-mode .story-main-box .left.story-dialog-item .message-bubble {
  background: #484848;
  border: 1px solid #565656
}

.night-mode .story-main-box .left.story-dialog-item .message-bubble::before {
  left: -7px;
  border-right-color: #565656
}

.night-mode .story-main-box .left.story-dialog-item .message-bubble::after {
  left: -6px;
  border-right-color: #484848
}

.night-mode .story-main-box .right.story-dialog-item .message-bubble {
  background: #155512;
  border: 1px solid #074004
}

.night-mode .story-main-box .right.story-dialog-item .message-bubble::before {
  right: -7px;
  border-left-color: #074004
}

.night-mode .story-main-box .right.story-dialog-item .message-bubble::after {
  right: -6px;
  border-left-color: #155512
}

.night-mode .story-main-box .image-type.story-dialog-item .message-bubble {
  padding: 0;
  border-radius: 3px;
  border: none;
  overflow: hidden
}

.night-mode .story-main-box .image-type.story-dialog-item .message-bubble > img {
  vertical-align: top;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

.night-mode .story-main-box .story-dialog-item .dialog-comment-flag {
  border-color: #191919
}

.night-mode .story-main-box .story-dialog-item .dialog-comment-flag.count {
  color: #5b5b5b;
  background: #313030
}

.night-mode .story-main-box .story-dialog-item .dialog-comment-flag.max-count {
  color: #7c3f3f;
  background: #313030
}

.night-mode .story-main-box .story-dialog-misc-item .text {
  color: #063a3e;
  background: #666;
  border: 1px solid #767676
}

.story-main-box .story-dialog-item {
  padding: 0 10px;
  margin-bottom: 20px;
  transition: opacity 0.5s;
  display: flex
}

.story-main-box .left.story-dialog-item .content-box {
  padding-left: 5px
}

.story-main-box .left.story-dialog-item .name {
  text-align: left
}

.story-main-box .left.story-dialog-item .dialog-comment-flag {
  margin-left: -10px
}

.story-main-box .right.story-dialog-item {
  flex-direction: row-reverse
}

.story-main-box .right.story-dialog-item .content-box {
  padding-right: 5px
}

.story-main-box .right.story-dialog-item .name {
  text-align: right
}

.story-main-box .right.story-dialog-item .message-content-box {
  flex-direction: row-reverse
}

.story-main-box .right.story-dialog-item .dialog-comment-flag {
  margin-right: -10px
}

.story-main-box .story-dialog-item .content-box {
  flex: 1 1 auto
}

.story-main-box .story-dialog-item .avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  overflow: hidden;
  background: #d9d9d9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23f4f4f4' stroke='transparent' stroke-width='0' style='' d='M31.6,19.9c0.2,0,0.4-0.1,0.4-0.3c0-0.2-0.1-0.4-0.3-0.4C31.1,19.1,30.6,19,30,19c0.3-1.5,0.2-3.1-0.3-4.5\a   c1.6-3.2,2.7-9.8,1.7-10.7c-3.8,0-7.1,2.2-9.1,3.7c-3-1.2-7-1.8-12-0.5l-0.2-0.2C6.9,3.9,3.3,2,1.9,2.2c-0.3,0.6,0.3,8,0.6,11.4\a   c-0.3,0.8-0.5,1.7-0.6,2.5c-0.2,1.4-0.1,2.9,0.2,4.3c-0.6,0.1-1.2,0.2-1.8,0.4C0.1,20.9,0,21.1,0,21.3s0.3,0.3,0.4,0.3l0,0\a   c0.6-0.2,1.2-0.3,1.8-0.4c0,0.2,0.1,0.3,0.2,0.5c-0.6,0.2-1.3,0.3-1.9,0.6c-0.2,0.1-0.3,0.3-0.2,0.5c0.1,0.2,0.3,0.3,0.5,0.2\a   c0.6-0.2,1.3-0.4,1.9-0.6c0.1,0.2,0.1,0.3,0.2,0.5c-0.5,0.1-1,0.3-1.5,0.5c-0.2,0.1-0.3,0.3-0.2,0.5C1.3,24,1.5,24.1,1.7,24\a   c0.5-0.2,1-0.4,1.5-0.5c1.3,2.3,3.4,4.2,5.8,5.3c2.8,1.3,13.7,2.6,18.6-3.8c0.6-0.9,1.1-1.8,1.5-2.8c0.5,0.1,1,0.2,1.5,0.3\a   c0.2,0.1,0.4-0.1,0.5-0.2c0.1-0.2-0.1-0.4-0.2-0.5c-0.5-0.1-0.9-0.2-1.4-0.3c0.1-0.2,0.1-0.3,0.2-0.5c0.5,0.1,1.1,0.2,1.8,0.3\a   c0.2,0,0.4-0.1,0.4-0.3s-0.1-0.4-0.3-0.4l0,0c-0.7-0.2-1.3-0.3-1.8-0.3c0-0.2,0.1-0.3,0.1-0.5C30.4,19.8,31,19.8,31.6,19.9z\a    M11.8,17.7c0,1.9-1.5,3.5-3.4,3.5c-1.9,0-3.5-1.5-3.5-3.4c0,0,0,0,0,0c0-1.8,1.5-3.3,3.3-3.3l0,0C10,14.4,11.8,15.8,11.8,17.7z\a    M26.3,17.2c0,1.9-1.2,3.6-3.1,3.6s-3.9-1.6-3.9-3.5c0.1-1.9,1.7-3.4,3.6-3.5C24.8,13.8,26.3,15.3,26.3,17.2z M9,16.1\a   c0.9,0,1.6,0.7,1.6,1.6S9.9,19.4,9,19.4c-0.9,0-1.6-0.7-1.6-1.6S8.1,16.1,9,16.1z M21.8,15.8c0.8,0,1.5,0.6,1.5,1.5\a   s-0.6,1.5-1.5,1.5s-1.5-0.6-1.5-1.5S21,15.8,21.8,15.8z M15,20.7c0-0.4,1.7-0.6,1.7-0.1c0,0.5-0.4,0.9-0.9,0.9\a   c-0.4,0.1-0.8-0.2-0.8-0.7C15,20.8,15,20.7,15,20.7z' /%3E%3C/svg%3E") no-repeat 50% 50%;
  background-size: 15px
}

.story-main-box .story-dialog-item .avatar .avatar-content {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%
}

.story-main-box .story-dialog-item .name {
  color: #888;
  font-size: 10px;
  line-height: 1.1;
  padding-bottom: 1px
}

.story-main-box .story-dialog-item .message-content-box {
  display: flex
}

.story-main-box .story-dialog-item .message-bubble-wrap {
  max-width: 75%
}

.story-main-box .story-dialog-item .message-bubble {
  font-size: 15px;
  color: #111;
  border-radius: 4px;
  padding: 10px;
  position: relative;
  min-width: 15px;
  min-height: 24px;
  word-break: break-all
}

.story-main-box .story-dialog-item .message-bubble::before, .story-main-box .story-dialog-item .message-bubble::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 0;
  height: 0;
  border: 3px solid transparent
}

.story-main-box .story-dialog-item .btn-view-full-image {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 10px;
  text-indent: -9999em
}

.story-main-box .story-dialog-item .btn-view-full-image::before {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  background: rgba(0, 0, 0, 0.41) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' stroke='transparent' stroke-width='0' style='' d='M0.9,12C0.4,12,0,11.6,0,11.1V2.8C0,1.3,1.3,0,2.8,0h8.8c0.5,0,0.9,0.4,0.9,0.9s-0.4,0.9-0.9,0.9H2.8\a   c-0.5,0-0.9,0.4-0.9,0.9v8.2C1.9,11.6,1.5,12,0.9,12z M32,11.7V2.8C32,1.3,30.7,0,29.2,0h-8.2C20.4,0,20,0.4,20,0.9s0.4,0.9,0.9,0.9\a   h8.2c0.5,0,0.9,0.4,0.9,0.9v8.8c0,0.5,0.4,0.9,0.9,0.9C31.6,12.6,32,12.2,32,11.7z M12,31.1c0-0.5-0.4-0.9-0.9-0.9H2.8\a   c-0.5,0-0.9-0.4-0.9-0.9v-8.8c0-0.5-0.4-0.9-0.9-0.9S0,19.8,0,20.3v8.8C0,30.7,1.3,32,2.8,32h8.3C11.6,32,12,31.6,12,31.1z M32,29.2\a   v-8.2c0-0.5-0.4-0.9-0.9-0.9c-0.5,0-0.9,0.4-0.9,0.9v8.2c0,0.5-0.4,0.9-0.9,0.9h-8.8c-0.5,0-0.9,0.4-0.9,0.9c0,0.5,0.4,0.9,0.9,0.9\a   h8.8C30.7,32,32,30.7,32,29.2z M24.4,15.8c0-4.6-3.8-8.4-8.4-8.4s-8.4,3.8-8.4,8.4s3.8,8.4,8.4,8.4S24.4,20.4,24.4,15.8z M23.2,15.8\a   c0,3.9-3.2,7.2-7.2,7.2c-3.9,0-7.2-3.2-7.2-7.2c0-3.9,3.2-7.2,7.2-7.2C19.9,8.6,23.2,11.9,23.2,15.8z M25.4,25.3\a   c0.2-0.2,0.2-0.6,0-0.9l-3.5-3.5c-0.2-0.2-0.6-0.2-0.9,0c-0.2,0.2-0.2,0.6,0,0.9l3.5,3.5c0.1,0.1,0.3,0.2,0.4,0.2\a   C25.1,25.5,25.3,25.4,25.4,25.3z' /%3E%3C/svg%3E") no-repeat 50% 50%;
  background-size: 15px;
  border-radius: 12.5px
}

.story-main-box .story-dialog-item .dialog-comment-flag {
  width: 24px;
  height: 15px;
  line-height: 15px;
  border-radius: 10.5px;
  border: 3px solid #ecedf1;
  font-size: 9px;
  margin-top: auto;
  flex: 0 0 auto;
  text-align: center;
  position: relative;
  margin-bottom: -3px
}

.story-main-box .story-dialog-item .dialog-comment-flag.zero {
  display: none
}

.story-main-box .story-dialog-misc-item {
  text-align: center;
  padding: 0 14px;
  transition: opacity 0.5s;
  margin-bottom: 14px;
  display: flex;
  justify-content: center
}

.story-main-box .story-dialog-misc-item .text {
  font-size: 15px;
  border-radius: 10px;
  padding: 6px 15px;
  text-align: justify;
  word-break: break-all
}

.story-main-box .story-end-action-item.action-subscribe .action-item-content,
.misc-menu-popup .misc-menu-item-subscribe-collection, .collection-box .collection-info-box .btn-subscribe-collection-toggle {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

.story-main-box .story-end-action-item.action-subscribe .action-item-content::before,
.misc-menu-popup .misc-menu-item-subscribe-collection::before,
.collection-box .collection-info-box .btn-subscribe-collection-toggle::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%
}

.story-main-box .story-end-action-item.action-subscribe .action-item-content::after,
.misc-menu-popup .misc-menu-item-subscribe-collection::after, .collection-box .collection-info-box .btn-subscribe-collection-toggle::after {
  content: "我要追番";
  vertical-align: middle
}

.story-main-box .story-end-action-item.action-subscribe .subscribed.action-item-content::after,
.misc-menu-popup .subscribed.misc-menu-item-subscribe-collection::after,
.collection-box .collection-info-box .subscribed.btn-subscribe-collection-toggle::after {
  content: "取消追番"
}

.story-main-box.dark-theme .left.story-dialog-item .name {
  color: #fb31e8
}

.story-main-box.dark-theme .left.story-dialog-item .message-bubble {
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(109, 109, 109, 0.62)
}

.story-main-box.dark-theme .left.story-dialog-item .message-bubble::before {
  left: -7px;
  border-right-color: rgba(109, 109, 109, 0.62)
}

.story-main-box.dark-theme .left.story-dialog-item .message-bubble::after {
  left: -6px;
  border-right-color: rgba(0, 0, 0, 0.6)
}

.story-main-box.dark-theme .right.story-dialog-item .name {
  color: #09f7ff
}

.story-main-box.dark-theme .right.story-dialog-item .message-bubble {
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(109, 109, 109, 0.62)
}

.story-main-box.dark-theme .right.story-dialog-item .message-bubble::before {
  right: -7px;
  border-left-color: rgba(109, 109, 109, 0.62)
}

.story-main-box.dark-theme .right.story-dialog-item .message-bubble::after {
  right: -6px;
  border-left-color: rgba(0, 0, 0, 0.6)
}

.story-main-box.dark-theme .image-type.story-dialog-item .message-bubble {
  padding: 0;
  border-radius: 3px;
  border: none;
  overflow: hidden
}

.story-main-box.dark-theme .image-type.story-dialog-item .message-bubble > img {
  vertical-align: top;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

.story-main-box.dark-theme .story-dialog-misc-item .text {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(109, 109, 109, 0.62);
  color: #5773b1
}

.story-main-box.qq-theme .left.story-dialog-item .content-box {
  padding-left: 11px
}

.story-main-box.qq-theme .left.story-dialog-item .name {
  color: #888;
  margin-left: -5px;
  padding-bottom: 4px
}

.story-main-box.qq-theme .left.story-dialog-item .message-bubble {
  border-radius: 12px;
  color: #111;
  background: #fff;
  border: 1px solid #ececec
}

.story-main-box.qq-theme .left.story-dialog-item .message-bubble::before {
  display: none
}

.story-main-box.qq-theme .left.story-dialog-item .message-bubble::after {
  content: "";
  position: absolute;
  top: 8px;
  left: -8.5px;
  width: 11px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' stroke='%23ececec' stroke-width='2px' style='' d='M7.2,32C20.8,22.9,26.3,5.6,25,0c-2.6,3.7-9.1,7.8-18.1,10.9' /%3E%3C/svg%3E");
  background-size: 100%;
  border: none;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1)
}

.story-main-box.qq-theme .right.story-dialog-item .content-box {
  padding-right: 11px
}

.story-main-box.qq-theme .right.story-dialog-item .name {
  color: #888;
  margin-right: -5px;
  padding-bottom: 4px
}

.story-main-box.qq-theme .right.story-dialog-item .message-bubble {
  border-radius: 12px;
  color: #fff;
  background: #27c2fd;
  border: 1px solid #23bef9
}

.story-main-box.qq-theme .right.story-dialog-item .message-bubble::before {
  display: none
}

.story-main-box.qq-theme .right.story-dialog-item .message-bubble::after {
  content: "";
  position: absolute;
  top: 8px;
  right: -8.5px;
  width: 11px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2327c2fd' stroke='%2323bef9' stroke-width='2px' style='' d='M7.2,32C20.8,22.9,26.3,5.6,25,0c-2.6,3.7-9.1,7.8-18.1,10.9' /%3E%3C/svg%3E");
  background-size: 100%;
  border: none
}

.story-main-box.qq-theme .image-type.left.story-dialog-item .content-box {
  padding-left: 6px
}

.story-main-box.qq-theme .image-type.left.story-dialog-item .name {
  margin-left: 0
}

.story-main-box.qq-theme .image-type.right.story-dialog-item .content-box {
  padding-right: 6px
}

.story-main-box.qq-theme .image-type.right.story-dialog-item .name {
  margin-right: 0
}

.story-main-box.qq-theme .image-type.story-dialog-item .message-bubble {
  padding: 0;
  border-radius: 3px;
  border: none;
  overflow: hidden
}

.story-main-box.qq-theme .image-type.story-dialog-item .message-bubble > img {
  vertical-align: top;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

.story-main-box.qq-theme .story-dialog-misc-item {
  border-radius: 12px
}

.story-main-box.qq-theme .story-dialog-misc-item .text {
  color: #085a60;
  background: #dadada;
  border: 1px solid #dedede
}

.night-mode .story-main-box.qq-theme .left.story-dialog-item .message-bubble {
  color: #bebebe;
  background: #494949;
  border: 1px solid #565656
}

.night-mode .story-main-box.qq-theme .left.story-dialog-item .message-bubble::before {
  display: none
}

.night-mode .story-main-box.qq-theme .left.story-dialog-item .message-bubble::after {
  content: "";
  position: absolute;
  top: 8px;
  left: -8.5px;
  width: 11px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23494949' stroke='%23565656' stroke-width='2px' style='' d='M7.2,32C20.8,22.9,26.3,5.6,25,0c-2.6,3.7-9.1,7.8-18.1,10.9' /%3E%3C/svg%3E");
  background-size: 100%;
  border: none;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1)
}

.night-mode .story-main-box.qq-theme .right.story-dialog-item .message-bubble {
  color: #bebebe;
  background: #0b3c4e;
  border: 1px solid #063b4f
}

.night-mode .story-main-box.qq-theme .right.story-dialog-item .message-bubble::before {
  display: none
}

.night-mode .story-main-box.qq-theme .right.story-dialog-item .message-bubble::after {
  content: "";
  position: absolute;
  top: 8px;
  right: -8.5px;
  width: 11px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%230b3c4e' stroke='%23063b4f' stroke-width='2px' style='' d='M7.2,32C20.8,22.9,26.3,5.6,25,0c-2.6,3.7-9.1,7.8-18.1,10.9' /%3E%3C/svg%3E");
  background-size: 100%;
  border: none
}

.night-mode .story-main-box.qq-theme .image-type.story-dialog-item .message-bubble {
  padding: 0;
  border-radius: 3px;
  border: none;
  overflow: hidden
}

.night-mode .story-main-box.qq-theme .image-type.story-dialog-item .message-bubble > img {
  vertical-align: top;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

.night-mode .story-main-box.qq-theme .story-dialog-misc-item .text {
  color: #063a3e;
  background: #666;
  border: 1px solid #767676
}

body, html {
  min-height: 100%;
  background: transparent
}

body.prevent-scrolling, html.prevent-scrolling {
  height: 100%;
  position: relative;
  overflow: hidden
}

.btn-pause {
  position: fixed;
  left: 50%;
  margin-left: -22.5px;
  bottom: 50px;
  width: 45px;
  height: 45px;
  text-indent: -9999em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M16,32.1c-8.8,0-16-7.2-16-16s7.2-16,16-16s16,7.2,16,16S24.8,32.1,16,32.1z M16,1.1c-8.3,0-15,6.7-15,15s6.7,15,15,15\a   s15-6.7,15-15S24.3,1.1,16,1.1z M12.6,22.4c-0.7,0-1.2-0.5-1.2-1.2l0,0V11.1c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2c0,0,0,0,0,0\a   v10.1C13.8,21.9,13.2,22.4,12.6,22.4L12.6,22.4z M19.5,22.4c-0.7,0-1.2-0.5-1.2-1.2V11.1c0-0.7,0.5-1.2,1.2-1.2\a   c0.7,0,1.2,0.5,1.2,1.2c0,0,0,0,0,0v10.1C20.7,21.9,20.1,22.4,19.5,22.4L19.5,22.4z' /%3E%3C/svg%3E");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: none;
  pointer-events: none
}

.story-main-box {
  position: relative
}

.story-main-box.the-end .story-dialog-list {
  padding-bottom: 100px
}

.story-main-box.the-end .story-end-cat, .story-main-box.the-end .story-end-actions,
.story-main-box.the-end .recommend-story-box {
  display: block;
  opacity: 1
}

.story-main-box.goto-end-directly .story-dialog-list {
  transition: padding-bottom 0
}

.story-main-box .story-content {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh
}

.story-main-box .story-dialog-list {
  padding: 63px 0 40vh;
  transition: padding-bottom 0.3s
}

.story-main-box .story-dialog-item {
  transition: opacity 0.5s, padding-bottom 0.4s
}

.story-main-box .story-dialog-item .message-bubble-wrap {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

.story-main-box .story-dialog-item.show-comment {
  padding-bottom: 85vh
}

.story-main-box .story-copyright-tips {
  font-size: 12px;
  color: #999;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px
}

.story-main-box .story-copyright-tips.top-tips {
  padding-top: 20px;
  padding-bottom: 20px
}

.story-main-box .story-copyright-tips.bottom-tips {
  padding-top: 55px
}

.story-main-box .story-end-cat, .story-main-box .story-end-actions,
.story-main-box .recommend-story-box {
  display: none;
  opacity: 0;
  transition: opacity 0.5s
}

.story-main-box .story-end-cat {
  color: #999;
  font-size: 12px;
  text-align: center;
  padding-top: 61px;
  background: url("/static/hybrid/image/story_end_cat.png") no-repeat 50% 0;
  background-size: 55px auto
}

.story-main-box .story-end-actions {
  padding: 0 5px 30px;
  margin-top: -55px
}

.story-main-box .story-end-actions .author-info-box {
  margin: 0 15px;
  height: 70px;
  border-radius: 35px;
  background: #e6e7ec;
  padding: 0 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center
}

.story-main-box .story-end-actions .author-info-box > a {
  text-decoration: none;
  font-size: 13px;
  color: #333;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.story-main-box .story-end-actions .author-info-box .author-avatar {
  width: 45px;
  height: 45px;
  border-radius: 22.5px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
  margin-right: 11px;
  display: inline-block;
  vertical-align: middle
}

.story-main-box .story-end-actions .author-info-box .icon-author {
  width: 30px;
  height: 26px;
  background: url("/static/hybrid/image/author_icon.png") no-repeat 0 40%;
  background-size: 100%;
  margin-left: 4px
}

.story-main-box .story-end-actions .author-info-box .btn-follow-author {
  height: 29px;
  line-height: 29px;
  border-radius: 14.5px;
  padding: 0 16px;
  background: #39c6d2;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-left: auto;
  opacity: 0.76
}

.story-main-box .story-end-actions .author-info-box .btn-follow-author::before {
  content: "+关注"
}

.story-main-box .story-end-actions .author-info-box .btn-follow-author.followed,
.story-main-box .story-end-actions .author-info-box .btn-follow-author.bilateral {
  background: #c4c4c4
}

.story-main-box .story-end-actions .author-info-box .btn-follow-author.followed::before {
  content: "已关注"
}

.story-main-box .story-end-actions .author-info-box .btn-follow-author.bilateral::before {
  content: "相互关注"
}

.story-main-box .story-end-misc-action-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 0 40px 49px;
  -webkit-justify-content: space-between;
  justify-content: space-between
}

.story-main-box .story-end-misc-action-item {
  font-size: 12px;
  color: #999;
  padding-top: 30px;
  background-repeat: no-repeat;
  background-position: 50% 5px;
  background-size: 20px
}

.story-main-box .story-end-misc-action-item.action-like-related {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M15.1,30.4c-3.1,0-5.8-0.6-7-1.1C2.8,27-0.3,21.5,0.4,15.8c0.2-0.8,0.3-1.5,0.5-2.1C-0.7,4.4,0.2,2.5,1.2,1.9\a   c2.4-1.1,6,1.5,8.7,3.9c4-1.1,8.3-0.9,12.1,0.5c4.1-3,7.1-4,8.7-3c0.1,0,0.1,0.1,0.1,0.1c1.9,1.9,0.9,7.6-0.7,10.8\a   c1.4,4.8-1.2,9.2-2.4,11C24.8,29.2,19.6,30.4,15.1,30.4z M2.5,3c-0.2,0-0.4,0-0.6,0.1c-0.1,0-1.2,1.1,0.4,10.4c0,0.1,0,0.2,0,0.3\a   c-0.2,0.6-0.3,1.3-0.5,2.1c-0.6,5,2.2,10,6.9,11.9c2.7,1.2,13.4,2.5,18-3.6c1.1-1.6,3.4-5.7,2.1-10c-0.1-0.2,0-0.4,0-0.6\a   c1.6-3.1,2.2-8.1,1.2-9.3c-1.1-0.5-4,0.7-7.4,3.2c-0.2,0.1-0.5,0.2-0.7,0.1c-3.8-1.5-8-1.7-12-0.5c-0.2,0.1-0.5,0-0.7-0.2L9,6.8\a   C5.8,4,3.7,3,2.5,3z M7.8,18.8l2.3-1.5c0.2-0.1,0.3-0.3,0.3-0.6c0-0.2-0.1-0.5-0.3-0.6l-2.3-1.8c-0.3-0.2-0.8-0.2-1,0.1\a   c-0.2,0.3-0.2,0.8,0.1,1l1.5,1.2l-1.5,1c-0.3,0.2-0.4,0.7-0.2,1c0.1,0.2,0.4,0.3,0.6,0.3C7.5,18.9,7.6,18.9,7.8,18.8z M24.3,18.6\a   c0.2-0.3,0.2-0.8-0.1-1l-1.5-1.2l1.5-1c0.3-0.2,0.4-0.7,0.2-1c-0.2-0.3-0.7-0.4-1-0.2L21,15.8c-0.2,0.1-0.3,0.3-0.3,0.6\a   c0,0.2,0.1,0.5,0.3,0.6l2.3,1.8c0.1,0.1,0.3,0.2,0.4,0.2C24,18.9,24.2,18.8,24.3,18.6z' /%3E%3C/svg%3E")
}

.story-main-box .story-end-misc-action-item.action-like-related.liked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M31,3.4c0,0-0.1-0.1-0.2-0.1c-1.6-1-4.6,0.1-8.8,3.1c-3.8-1.4-8.1-1.6-12.1-0.6C7.2,3.4,3.5,0.8,1.1,2\a   C0.2,2.5-0.8,4.4,0.9,13.6c-0.2,0.6-0.3,1.3-0.5,2.1C-0.3,21.4,2.9,27,8.2,29.2c1.2,0.6,3.9,1.1,7,1.1c4.4,0,9.7-1.1,12.8-5.3\a   c1.1-1.7,3.7-6.2,2.4-11C31.8,11,32.9,5.2,31,3.4z M15,25.8L15,25.8c-4.2,0-7.6-3.4-7.6-7.6c0-0.4,0.3-0.8,0.7-0.8l0,0\a   c0.4,0,0.7,0.3,0.8,0.7c0,3.4,2.8,6.2,6.2,6.2l0,0c1.6,0,3.2-0.7,4.4-1.8c1.1-1.1,1.8-2.8,1.8-4.4c0-0.4,0.3-0.7,0.8-0.7l0,0\a   c0.4,0,0.8,0.3,0.7,0.8c0,2-0.8,4-2.3,5.4C19,25.1,17,25.8,15,25.8z' /%3E%3C/svg%3E")
}

.story-main-box .story-end-misc-action-item.action-like-related.disliked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M31,3.4c0,0-0.1-0.1-0.2-0.1c-1.6-1-4.6,0.1-8.8,3.1c-3.8-1.4-8.1-1.6-12.1-0.6C7.2,3.4,3.5,0.8,1.1,2\a   C0.2,2.5-0.8,4.4,0.9,13.6c-0.2,0.6-0.3,1.3-0.5,2.1C-0.3,21.4,2.9,27,8.2,29.2c1.2,0.6,3.9,1.1,7,1.1c4.4,0,9.7-1.1,12.8-5.3\a   c1.1-1.7,3.7-6.2,2.4-11C31.8,11,32.9,5.2,31,3.4z M22.1,25.8c-0.4,0-0.7-0.3-0.8-0.7c0-3.4-2.8-6.2-6.2-6.2l0,0\a   c-3.4,0-6.2,2.8-6.2,6.2c0,0.4-0.3,0.7-0.8,0.7l0,0c-0.4,0-0.7-0.3-0.7-0.8c0-4.2,3.4-7.6,7.6-7.6l0,0c4.2,0,7.6,3.4,7.6,7.6\a   C22.7,25.5,22.5,25.8,22.1,25.8L22.1,25.8z' /%3E%3C/svg%3E")
}

.story-main-box .story-end-misc-action-item.action-donate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M13.4,28.1c-0.1,0-0.2,0-0.2,0C5.9,28.1,0,22.6,0,16C0,9.4,5.9,3.9,13.2,3.9c4.1,0,8.1,1.8,10.7,4.9\a   c0.4-0.2,0.8-0.4,1.2-0.6c2.9-0.9,6,0.3,6.7,2.8c0.4,1.8-0.1,3.6-1.4,4.8c1.4,1.4,1.9,3.2,1.4,4.9c-1,2.4-4,3.5-6.9,2.5\a   c-0.3-0.1-0.6-0.2-0.9-0.4C21.5,26.2,17.6,28.1,13.4,28.1z M13.4,5.8c-0.1,0-0.1,0-0.2,0C7,5.8,1.9,10.4,1.9,16S7,26.2,13.2,26.2\a   c3.9,0,7.6-1.8,9.8-5.1l0.6-0.8l0.8,0.6c0.4,0.3,0.8,0.5,1.2,0.6c1.9,0.7,3.9,0.1,4.5-1.3c0.4-1.2-0.3-2.7-1.7-3.5l-1.5-0.9l1.5-0.8\a   c1.3-0.6,1.9-2,1.6-3.4c-0.5-1.4-2.4-2.1-4.3-1.5c-0.5,0.2-1,0.4-1.4,0.8l-0.8,0.6l-0.6-0.8C20.7,7.7,17.2,5.8,13.4,5.8z M6.3,14.4\a   c1,0,1.9,0.8,1.9,1.9s-0.8,1.9-1.9,1.9s-1.9-0.8-1.9-1.9S5.2,14.4,6.3,14.4z' /%3E%3C/svg%3E")
}

.story-main-box .story-end-action-list {
  text-align: center;
  padding-bottom: 40px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around
}

.story-main-box .story-end-action-item {
  min-width: 95px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative
}

.story-main-box .story-end-action-item .action-item-content {
  height: 45px;
  line-height: 45px;
  border: 0.5px solid #e1e1e1;
  border-radius: 22.5px;
  box-sizing: border-box;
  color: #39c6d2;
  font-size: 12px;
  padding: 0 22px
}

.story-main-box .story-end-action-item .action-item-content::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative
}

.story-main-box .story-end-action-item.action-comment .action-item-content::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M13.8,31.9c-0.4,0-0.9-0.1-1.2-0.3c-0.7-0.3-1.1-1-1.1-1.8v-4.6C4.8,24.7-0.3,18.9,0,12.2C0.3,5.6,5.6,0.3,12.2,0l7.7,0\a   C26.7,0.2,32.1,5.9,32,12.7c0,4.2-2.1,8.2-5.6,10.6c0,0-5.3,4.2-10,7.7C15.6,31.6,14.6,31.9,13.8,31.9z M19.8,1.5h-7.6\a   C6.4,1.7,1.7,6.4,1.4,12.2C1.2,18.4,6,23.7,12.2,23.9l0.7,0v6c0,0.2,0.1,0.4,0.3,0.5c0.5,0.2,1.5,0.1,2.4-0.6l0,0\a   c4.7-3.5,9.9-7.6,10-7.7c3.2-2.2,5-5.7,5-9.5C30.7,6.6,25.9,1.6,19.8,1.5z' /%3E%3C/svg%3E")
}

@keyframes move {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(4px)
  }
}

.story-main-box .story-end-action-item.action-share .redenvelope-flag {
  width: 40px;
  height: 28px;
  background: url("/static/hybrid/image/redenvelope_icon.png") no-repeat 0 0;
  background-size: 100%;
  position: absolute;
  top: -25px;
  right: 0px;
  animation: 0.5s ease-out 0s infinite alternate move
}

.story-main-box .story-end-action-item.action-share .action-item-content::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M28.2,31.4H3.8c-1.5,0-3.8-1.3-3.8-3.1V3.9c0-1.8,2.3-3,3.8-3H13c0.4,0,0.8,0.3,0.8,0.8c0,0,0,0,0,0l0,0\a   c0,0.4-0.3,0.8-0.8,0.8l0,0H3.8c-1,0-2.3,0.7-2.3,1.4v24.4c0,0.7,1.3,1.6,2.3,1.6h24.4c0.3,0,0.8,0,0.8-1.6v-9.8\a   c0-0.4,0.3-0.8,0.8-0.8l0,0l0,0c0.4,0,0.8,0.3,0.8,0.8l0,0v9.8C30.5,30.9,29.3,31.4,28.2,31.4C28.2,31.4,28.2,31.4,28.2,31.4z\a    M9.7,24.6c-0.4,0-0.7-0.3-0.7-0.7c0,0,0,0,0,0c0.1-5.7,1.8-10.1,5-13c3.7-3.3,9.3-4.6,16.7-3.9c0.4,0,0.7,0.4,0.7,0.8c0,0,0,0,0,0\a   l0,0c0,0.4-0.4,0.7-0.8,0.6C23.4,7.7,18.3,9,14.9,12c-2.9,2.5-4.4,6.1-4.5,11.8C10.4,24.2,10.1,24.5,9.7,24.6L9.7,24.6L9.7,24.6z\a    M24.8,14.2c-0.3-0.3-0.3-0.8,0-1.1c0,0,0,0,0,0l4.9-4.9c0.3-0.3,0.3-0.8,0-1.1l-4.9-5.2c-0.3-0.3-0.3-0.8,0-1.1c0,0,0,0,0,0l0,0\a   c0.3-0.3,0.8-0.3,1.1,0c0,0,0,0,0,0l5.9,6.3c0.3,0.3,0.3,0.8,0,1.1l-5.9,5.9C25.5,14.4,25.1,14.4,24.8,14.2\a   C24.8,14.1,24.8,14.1,24.8,14.2L24.8,14.2L24.8,14.2z' /%3E%3C/svg%3E")
}

.story-main-box .story-end-action-item.action-subscribe .action-item-content::before {
  width: 19px;
  height: 20px;
  background-image: url("/static/hybrid/image/collection_subscribe_icon.png");
  margin-top: -2px
}

.story-main-box .story-end-action-item.action-subscribe .action-item-content.subscribed::before {
  background-image: url("/static/hybrid/image/collection_subscribed_icon.png")
}

.story-main-box .recommend-story-hd {
  color: #999;
  font-size: 12px;
  text-align: center;
  padding-bottom: 8px
}

.story-main-box .recommend-story-bd {
  padding-top: 56%;
  position: relative;
  background: #2a2a2a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23666' stroke='transparent' stroke-width='0' style='' d='M2.2,16.2c0.4,0,0.9-0.1,1.3-0.3c0.3-0.1,0-0.6,0-0.6c-0.1-0.1-0.2-0.1-0.3-0.1c-0.3,0.1-0.5,0.2-0.8,0.2\a   c0.1-0.7,0.3-1.4,0.5-2.2c0-0.2,0-0.5-0.2-0.5c0,0-0.6-0.1-0.7,0.2c-0.1,0.4-0.3,1.3-0.5,2.3c0,0-0.1,0-0.1-0.1c0,0,0,0,0,0\a   c-0.2-0.3-0.3-0.8-0.2-1c0-0.1,0.1-0.1-0.1-0.2l-0.2-0.1c0,0-0.4-0.2-0.4,0.1c-0.1,0.4-0.3,1.2,0.2,1.8c0.2,0.2,0.5,0.4,0.8,0.4\a   c-0.1,1.3,0,2.3,0.3,3c0.3,0.5,0.8,0,0.8,0c0.1-0.1,0.2-0.2,0.1-0.3C2.1,18.2,2.1,17.2,2.2,16.2z M7.4,15.9c-0.1,0-0.2,0-0.3,0\a   c0.2-0.8,0.3-1.8,0.3-2.2c0-0.6-0.7-0.4-0.7-0.4c-0.1,0-0.2,0.1-0.2,0.1c-0.3,0-0.6-0.1-0.9-0.1c0-0.3,0-0.6,0-0.8\a   c0-0.4-1-0.4-1,0.2c0,0.2,0,0.4,0,0.7c-1,0.2-1.6,0.6-1.6,0.6l0.4,0.8c0,0,0.4-0.3,1.1-0.5c0,0.5-0.1,1-0.2,1.6\a   c-0.7,0.1-1,0.3-1.2,0.4c-0.1,0-0.3,0.2-0.3,0.3v0.4c0,0.2,0.2,0.3,0.3,0.2C3.3,17,3.7,17,4,16.9c-0.2,0.8-0.4,1.5-0.6,2.3\a   c-0.1,0.3,0,0.4,0.4,0.5c0,0,0.4,0.1,0.5-0.2c0.3-1,0.5-1.9,0.7-2.7c0.8-0.1,1.6-0.1,2.4,0c0.1,0,0.2-0.1,0.2-0.2\a   C7.6,16.5,7.8,16,7.4,15.9z M6,15.8c-0.3,0-0.6,0-0.8,0c0.1-0.6,0.2-1.2,0.2-1.6c0.3,0,0.6,0,0.9,0.1C6.3,14.7,6.2,15.3,6,15.8z\a    M7,18.1c-0.8-0.1-0.9-0.5-1-0.7c0-0.1-0.3-0.5-0.8,0c-0.1,0.1-0.1,0.3-0.1,0.4c0.1,0.3,0.7,1,1.8,1.3c0.7,0.2,0.6-0.7,0.5-0.8\a   C7.4,18.2,7.1,18.1,7,18.1z M14.9,17.5c0-0.8-0.2-2.1-0.3-2.5c0-0.1-0.1-0.1-0.2-0.2c-0.4-0.1-1,0-1.6,0c-0.1-0.2-0.1-0.4-0.1-0.7\a   c0.3,0,0.5,0.1,0.8,0.1c0.2,0,0.5,0,0.7-0.1l-0.2-1c-0.4,0.1-0.9,0-1.2,0c0-0.1,0-0.1,0.1-0.2c0-0.1,0.1-0.5-0.1-0.5\a   c0,0-0.7-0.3-0.8,0.1c0,0.2-0.1,0.5-0.2,0.9c-0.1,0.6-0.1,1.1,0,1.5c-0.2,0-0.3,0-0.4,0.1c-0.1,0-0.2,0.1-0.2,0.2c0,0,0,0,0,0\a   l0.1,0.4c0,0.1,0.1,0.2,0.2,0.2c0.6-0.1,1.4-0.2,2-0.2c0.1,0,0.2,0.1,0.2,0.2c0.1,0.5,0.2,1.2,0.2,1.7c0,0.1,0.1,0.2,0.2,0.2l0.6,0\a   C14.8,17.7,14.9,17.6,14.9,17.5C14.9,17.5,14.9,17.5,14.9,17.5z M13.3,18c0.1,0,0.2-0.1,0.2-0.3c0,0,0.2-0.9-0.4-0.7\a   c-1.4,0.5-2.2,0.2-2.6,0.1c-0.1,0-0.2-0.2-0.2-0.3c0.1-0.4,0.3-1,0.5-1.4c0.1-0.3-0.6-1.1-0.9-0.3c-0.2,0.5-0.6,1.4-0.5,2.1\a   c0,0.1,0.1,0.2,0.1,0.3c0.2,0.2,0.5,0.4,0.8,0.5c0.3,0.1,0.7,0.1,1.1,0.1C11.9,18.2,12.6,18.3,13.3,18z M9.7,18.5l-0.4-0.2\a   c-0.1-0.1-0.3-0.1-0.4,0c-0.1,0.1-0.2,0.2-0.2,0.4c0,0.1-0.2,0.4-0.1,0.4c0,0,0.5,0.7,0.8,0.5c0.2-0.2,0.4-0.5,0.6-0.7\a   C9.9,18.8,9.9,18.6,9.7,18.5z M11.4,18.6c0,0-0.7-0.3-0.8,0.2c0,0.3-0.2,0.6-0.1,0.6c0,0,0,0,0,0c0.1,0,1,0.4,1-0.1\a   c0-0.1,0-0.3,0-0.5C11.7,18.8,11.6,18.7,11.4,18.6z M13.6,18.6c-0.3-0.5-0.8,0-0.9,0.1c-0.1,0.1-0.1,0.2-0.1,0.3\a   c0.1,0.2,0.1,0.3,0.2,0.5c0.2,0.5,0.8,0.1,0.9,0c0.1-0.1,0.1-0.2,0-0.3C13.7,18.9,13.7,18.7,13.6,18.6z M15.7,18.8\a   c-0.2-0.2-0.3-0.5-0.5-0.7c-0.4-0.3-0.8,0.4-0.8,0.4c0,0.2,0,0.2,0.1,0.3c0.1,0.1,0.2,0.2,0.2,0.3C15.4,19.9,15.8,19,15.7,18.8z\a    M17,13.4c0,0.9,0.8,0.4,0.8,0.4c0.2-0.2,0.2-0.3,0.2-0.4c0-0.2,0-0.4-0.1-0.6c-0.2-0.5-0.7-0.1-0.7-0.1c-0.1,0.1-0.2,0.3-0.2,0.4\a   C17,13.3,17,13.3,17,13.4z M16.9,17.1c-0.1,1,0.9,0.5,1,0.1c0.1-1.4-0.2-2.3-0.2-2.8c0-0.3-0.6-0.2-0.6-0.2c-0.1,0-0.5,0.1-0.4,0.5\a   C17,15.4,17,16.3,16.9,17.1z M23.6,13.1c0-0.2-0.1-0.4-0.3-0.4c0,0-0.5-0.1-0.7,0.1c0,0-0.1,0-0.1,0c-1.8-0.3-3.6,0-4.3,0.2\a   c-0.4,0.1-0.1,0.6-0.1,0.6c0.1,0.2,0.3,0.2,0.4,0.2c0.6-0.1,2.2-0.4,4-0.1c0,1-0.1,2.5-0.3,3.7c-0.1,0.4,0.6,0.4,0.6,0.4\a   c0.2,0,0.3-0.1,0.3-0.3C23.6,15.8,23.6,13.8,23.6,13.1z M22.7,18.4c-0.6,0.1-1.2,0.2-1.4,0.2l0,0c-0.1-0.1-0.2-0.4-0.3-0.7\a   c0.2-0.1,0.4-0.4,0.6-0.6c0.3-0.5,0.4-1.2,0.2-1.7c-0.1-0.2-0.1-0.1-0.3-0.3c-0.1-0.1-0.2-0.3-0.1-0.4c0.1-0.1,0.3-0.2,0.4-0.2\a   c0.1,0,0.1-0.1,0.2-0.3c0,0,0.2-0.8-0.5-0.5c-0.3,0.1-0.6,0.3-0.9,0.4c-0.1,0.1-0.3,0.1-0.4,0.1c-0.1,0-0.1,0-0.2,0\a   c-0.6-0.2-0.8-0.3-1.2-0.4c-0.1,0-0.4,0-0.5,0.1c0,0-0.3,0.5,0.1,0.7c0.2,0.1,0.5,0.2,0.7,0.2c0.2,0,0.1,0.1,0,0.2\a   c-0.1,0.1-0.1,0.3-0.2,0.4c-0.4,0.8-0.2,1.3,0,1.6c0,0.1,0.1,0.2,0.2,0.3c-0.2,0.4-0.8,1-2.4,1l0,1c2.1,0,2.9-0.9,3.2-1.5\a   c0.1,0.4,0.3,1,0.7,1.3c0.2,0.2,0.3,0.3,0.7,0.3c0.4,0,1.1,0,1.6-0.2c0.1,0,0.2-0.1,0.3-0.4C23.2,19,23.4,18.2,22.7,18.4z\a    M20.3,17.1L20.3,17.1c-0.1,0-0.5-0.1-0.7-0.3c-0.1-0.2,0-0.5,0.1-0.8c0,0,0.1-0.3,0.4-0.5c0.1,0,0.3,0,0.3,0\a   c0.2,0.1,0.4,0.3,0.5,0.5c0.1,0.2,0.1,0.4,0,0.7C20.8,17.1,20.3,17.1,20.3,17.1L20.3,17.1z M25.5,13.9c0,0.1,0.1,0.3,0.1,0.4\a   c0.2,0.2,0.4,0.2,0.4,0.2c0.3-0.1,0.4-0.1,0.4-0.3c0-0.3,0-0.7-0.1-0.9c0-0.2-0.2-0.2-0.4-0.2c0,0-0.7,0-0.6,0.5\a   C25.4,13.6,25.5,13.8,25.5,13.9z M26.2,17.5c-0.1,0-0.1,0-0.2,0c-0.1,0-0.2,0-0.2-0.1c0,0,0-0.1,0-0.1c0.1-0.5,0.3-1.3,0.6-2.1\a   c0.2-0.3-0.7-0.8-0.9-0.4c-0.3,0-0.5,0.1-0.7,0.1c-0.4,0,0,0.8,0,0.8c0.1,0.1,0.2,0.2,0.3,0.2c-0.7,2.1-0.3,2.4-0.2,2.6l0,0\a   c0.1,0.1,0.2,0.1,0.4,0.1c0.2,0,0.5-0.1,1.1-0.2c0.2,0,0.3-0.3,0.2-0.4C26.8,18.1,26.6,17.4,26.2,17.5z M27.2,15.2\a   c0.6-0.1,2.6-0.3,3.7-0.2c0,0.2-0.1,0.4-0.2,0.6c-0.2,0.4,0.1,0.5,0.1,0.5c0.1,0.1,0.6,0.1,0.7-0.1c0.4-0.8,0.4-1.5,0.3-1.8\a   c-0.1-0.4-0.7-0.1-0.9,0c-0.4,0-0.8,0-1.3,0c0-0.1,0-0.3,0-0.4c0.5,0,1,0,1.4,0c0.6,0.1,0.3-0.8,0.1-0.8c-0.5,0-1,0-1.5,0\a   c0-0.2,0-0.3,0-0.4l-1-0.1c0,0.1,0,0.3,0,0.5c-0.6,0-1,0.1-1.3,0.2c-0.4,0.1-0.2,0.7-0.2,0.7c0,0.1,0.2,0.2,0.3,0.2\a   c0.2,0,0.7-0.1,1.1-0.2c0,0.1,0,0.3,0,0.4c-0.7,0.1-1.3,0.1-1.6,0.2c-0.1,0-0.2,0.1-0.2,0.2C27,14.6,26.8,15.3,27.2,15.2z\a    M28.6,15.3c-0.2-0.3-0.7,0.2-0.7,0.2c-0.1,0.1-0.2,0.3-0.1,0.4c0.1,0.1,0.4,0.3,0.5,0.4c0.1,0.1,0.3,0.1,0.4,0\a   c0.1-0.1,0.2-0.3,0.2-0.6c0-0.1-0.1-0.2-0.2-0.3C28.6,15.4,28.6,15.3,28.6,15.3z M27.8,17.1c0.5,0,0.4-0.4,0.4-0.4\a   c0-0.1,0-0.3-0.2-0.3c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.2-0.2-0.3-0.2c-0.2,0-0.5,0.1-0.4,0.5C26.9,16.7,27.3,17,27.8,17.1z\a    M31.4,18.6c-0.5,0-0.8-0.3-0.9-0.5c0-0.1-0.2-0.1-0.3-0.1l-0.2,0c0,0-0.6,0-0.4,0.5c0.2,0.5,0.8,1.1,1.9,1.1h0.2\a   c0.5,0,0.2-0.7,0.2-0.7C31.7,18.7,31.5,18.6,31.4,18.6z M31.2,17.5c0.1,0,0.2-0.1,0.3-0.2c0,0,0.3-0.5-0.2-0.6c-0.5,0-1,0-1.5,0\a   c0.1-0.5,0.2-0.9,0.3-1.2c0-0.2,0-0.3-0.2-0.3c0,0-0.6-0.3-0.7,0.1c-0.1,0.5-0.3,1-0.5,1.5c-0.7,0.1-1.3,0.3-1.6,0.4\a   C26.8,17.5,27,18,27,18c0,0.1,0.2,0.2,0.3,0.2c0.2-0.1,0.5-0.2,1-0.3c-0.2,0.4-0.4,0.8-0.7,1.2c-0.1,0.1,0,0.2,0,0.3\a   c0,0.2,0.2,0.3,0.4,0.3c0.2,0,0.4,0,0.5-0.1c0.4-0.6,0.8-1.2,1-1.9C30.1,17.5,30.7,17.5,31.2,17.5z' /%3E%3C/svg%3E") no-repeat 50% 50%;
  background-size: 32% auto
}

.story-main-box .recommend-story-bd .story-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover
}

.story-main-box .recommend-story-bd .story-bg-mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.84);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center
}

.story-main-box .recommend-story-bd .story-intro {
  text-align: center
}

.story-main-box .recommend-story-bd .story-intro .title {
  font-size: 23px;
  color: #333
}

.story-main-box .recommend-story-bd .story-intro .chapter {
  font-size: 11px;
  color: #666
}

.story-main-box .recommend-story-bd .story-intro .chapter::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  margin-top: -2px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23666' stroke='transparent' stroke-width='0' style='' d='M24.8,29.7H7.2c-4,0-7.2-3.2-7.2-7.2V9.5c0-4,3.2-7.2,7.2-7.2h17.6c4,0,7.2,3.2,7.2,7.2v12.9C32,26.5,28.8,29.7,24.8,29.7z\a    M7.2,3.8C4,3.7,1.4,6.3,1.4,9.5v12.9c0,3.2,2.6,5.8,5.8,5.8h17.6c3.2,0,5.8-2.6,5.8-5.8V9.5c0-3.2-2.6-5.8-5.8-5.8c0,0,0,0,0,0\a   L7.2,3.8L7.2,3.8z M25.7,10.5H7c-0.4,0-0.8-0.2-0.8-0.6c0-0.4,0.2-0.8,0.6-0.8c0.1,0,0.1,0,0.2,0h18.7c0.4,0,0.8,0.2,0.8,0.6\a   c0,0.4-0.2,0.8-0.6,0.8C25.8,10.5,25.7,10.5,25.7,10.5z M19.7,16.5H7c-0.4,0-0.8-0.2-0.8-0.6c0-0.4,0.2-0.8,0.6-0.8\a   c0.1,0,0.1,0,0.2,0h12.7c0.4,0,0.8,0.2,0.8,0.6c0,0.4-0.2,0.8-0.6,0.8C19.8,16.5,19.7,16.5,19.7,16.5z M15.6,22.9H7\a   c-0.4,0-0.7-0.4-0.6-0.8c0-0.3,0.3-0.6,0.6-0.6h8.7c0.4,0.1,0.7,0.4,0.6,0.8C16.2,22.6,16,22.8,15.6,22.9z' /%3E%3C/svg%3E")
}

.story-main-box .recommend-story-bd .story-intro .btn-read-more {
  height: 45px;
  width: 160px;
  line-height: 45px;
  border-radius: 22.5px;
  margin: 33px auto 0;
  border: 0.5px solid #39c6d2;
  color: #39c6d2;
  font-size: 15px
}

.guide-story-click {
  width: 165px;
  height: 127px;
  position: fixed;
  bottom: 52px;
  left: 50%;
  margin-left: -82.5px;
  background: url("/static/hybrid/image/guide_story_click.png") no-repeat 0 0;
  background-size: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

.guide-common-box {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.83);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column
}

.guide-common-box.guide-autoplay {
  padding: 0 57px
}

.guide-common-box.guide-dialog-comment {
  justify-content: flex-end;
  padding-left: 25px;
  padding-right: 40px;
  padding-bottom: 60px;
  padding-top: 10px
}

.guide-common-box .btn-guide-known {
  width: 160px;
  height: 45px;
  line-height: 45px;
  border-radius: 22.5px;
  background: #39c6d2;
  color: #fff;
  font-size: 14px;
  text-align: center
}

.guide-story-autoplay {
  width: 100%;
  padding-top: 164.75096%;
  background: url("/static/hybrid/image/guide_story_autoplay.png") no-repeat 0 0;
  background-size: 100%;
  margin-bottom: 34px
}

.guide-story-dialog-comment {
  width: 100%;
  padding-top: 94.96644%;
  background: url("/static/hybrid/image/guide_story_dialog_comment.png") no-repeat 0 0;
  background-size: 100%;
  margin-bottom: auto
}

.reading-progress-bar-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0
}

.reading-progress-bar-box .reading-progress-bar {
  height: 4px;
  background: #39c6d2;
  width: 0;
  transition: width 0.5s
}

.navigation-bar {
  display: none;
  padding: 0;
  height: 55px;
  line-height: 55px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  text-align: center
}

.navigation-bar .bar-title-box, .navigation-bar .bar-title-wrap {
  display: flex;
  align-content: center;
  justify-content: center
}

.navigation-bar .bar-title-box {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 0;
  bottom: 0
}

.navigation-bar .bar-title-wrap {
  flex-direction: column;
  height: 100%;
  line-height: 1;
  max-width: 100%;
  padding: 0 20px;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

.navigation-bar .bar-title-wrap::after {
  content: "";
  border: 3px solid transparent;
  border-top-color: #999;
  position: relative;
  left: 50%;
  margin-left: -1.5px;
  bottom: -8px;
  margin-bottom: -3px;
  width: 0;
  height: 0;
  overflow: hidden
}

.navigation-bar .bar-button-item {
  display: inline-block;
  vertical-align: middle;
  width: 55px;
  height: 55px;
  text-indent: -9999em
}

.navigation-bar .bar-button-item-story-back {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23999' stroke='transparent' stroke-width='0' style='' d='M24.3,32c-0.2,0-0.4-0.1-0.5-0.2L7.2,16.2c-0.3-0.3-0.3-0.7,0-1c0,0,0,0,0,0L23.9,0.2c0.3-0.3,0.8-0.3,1,0s0.3,0.8,0,1\a   L8.7,15.7l16.1,15.1c0.3,0.3,0.3,0.7,0,1C24.7,31.9,24.5,32,24.3,32z' /%3E%3C/svg%3E") no-repeat 10px 50%;
  background-size: 14px
}

.navigation-bar .bar-button-item-misc {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23333' stroke='transparent' stroke-width='0' style='' d='M2.8,13.2c1.6,0,2.8,1.3,2.8,2.8s-1.3,2.8-2.8,2.8S0,17.6,0,16S1.3,13.2,2.8,13.2z M16.1,13.2c1.6,0,2.8,1.3,2.8,2.8\a   s-1.3,2.8-2.8,2.8s-2.8-1.3-2.8-2.8S14.6,13.2,16.1,13.2z M29.2,13.2c1.6,0,2.8,1.3,2.8,2.8s-1.3,2.8-2.8,2.8s-2.8-1.3-2.8-2.8\a   S27.6,13.2,29.2,13.2z' /%3E%3C/svg%3E") no-repeat 14px 50%;
  background-size: 25px
}

.navigation-bar .title-info-story-name {
  font-size: 14px;
  color: #313131;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding-bottom: 5px
}

.navigation-bar .title-info-story-chapters {
  font-size: 10px;
  color: #999
}

.misc-menu-popup {
  visibility: hidden;
  position: fixed;
  right: 15px;
  top: 0;
  opacity: 0;
  transition: top 0.3s, opacity 0.2s, visibility 0s linear 0.2s;
  transform: translateZ(0)
}

.misc-menu-popup.on {
  visibility: visible;
  top: 62px;
  opacity: 1;
  transition: top 0.3s, opacity 0.2s, visibility 0s linear 0s
}

.misc-menu-popup .misc-menu-list {
  border-radius: 5px;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0.7));
  position: relative
}

.misc-menu-popup .misc-menu-list::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 8px;
  border: 5px solid transparent;
  border-width: 5px 4px;
  border-bottom-color: #fff
}

.misc-menu-popup .misc-menu-item {
  padding: 0 15px;
  height: 40px;
  line-height: 40px;
  color: #333;
  font-size: 14px;
  border-bottom: 0.5px solid #e1e1e1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

.misc-menu-popup .misc-menu-item:last-child {
  border-bottom: none
}

.misc-menu-popup .misc-menu-item::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin-right: 14px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%
}

.misc-menu-popup .misc-menu-item-chapter::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23333' stroke='transparent' stroke-width='0' style='' d='M24.8,32H7.2c-4,0-7.2-3.2-7.2-7.2V7.2C0,3.2,3.2,0,7.2,0h17.6c4,0,7.2,3.2,7.2,7.2v17.6C32,28.8,28.8,32,24.8,32z M7.2,1.4\a   C4,1.4,1.4,4,1.4,7.2v17.6c0,3.2,2.6,5.8,5.8,5.8h17.6c3.2,0,5.8-2.6,5.8-5.8V7.2c0-3.2-2.6-5.8-5.8-5.8H7.2z M26.4,9.8\a   c0-0.4-0.3-0.7-0.7-0.7H7c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7h18.7C26.1,10.5,26.4,10.2,26.4,9.8z M20.4,15.8\a   c0-0.4-0.3-0.7-0.7-0.7H7c-0.4,0-0.7,0.3-0.7,0.7s0.3,0.7,0.7,0.7h12.7C20.1,16.5,20.4,16.2,20.4,15.8z M16.3,22.1\a   c0-0.4-0.3-0.7-0.7-0.7H7c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7h8.7C16,22.9,16.3,22.5,16.3,22.1z' /%3E%3C/svg%3E")
}

.misc-menu-popup .misc-menu-item-night-mode::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23333' stroke='transparent' stroke-width='0' style='' d='M7.6,8.7L5.7,7.2L3.7,8.7C3.6,8.7,3.5,8.7,3.4,8.7c-0.1,0-0.2,0-0.3-0.1C3,8.5,2.9,8.3,3,8.1l0.8-2.3L2.1,4.5\a   C1.9,4.4,1.9,4.2,2,4C2,3.8,2.2,3.6,2.4,3.6h2l0.8-2.1c0.1-0.4,0.8-0.4,0.9,0l0.8,2.1h2c0.2,0,0.4,0.1,0.5,0.3\a   c0.1,0.2,0,0.4-0.2,0.5L7.5,5.8l0.8,2.3c0.1,0.2,0,0.4-0.2,0.5C8,8.8,7.8,8.8,7.6,8.7z M13.4,11.7c-0.1-0.2-0.2-0.3-0.5-0.3h-1.4\a   L11.1,10c-0.1-0.4-0.8-0.4-0.9,0l-0.5,1.4H8.3c-0.2,0-0.4,0.1-0.5,0.3c-0.1,0.2,0,0.4,0.2,0.5l1.1,0.9l-0.5,1.6\a   c-0.1,0.2,0,0.4,0.2,0.5c0.2,0.1,0.4,0.1,0.6,0l1.3-1l1.3,1c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1c0.2-0.1,0.2-0.3,0.2-0.5\a   l-0.5-1.6l1.1-0.9C13.4,12.1,13.5,11.9,13.4,11.7z M6,19.9H5.1l-0.4-1c-0.1-0.4-0.8-0.4-0.9,0l-0.4,1h-1c-0.2,0-0.4,0.1-0.5,0.3\a   c-0.1,0.2,0,0.4,0.2,0.5L3,21.4l-0.4,1.1c-0.1,0.2,0,0.4,0.2,0.5c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1l0.9-0.7L5.2,23\a   c0.2,0.1,0.4,0.1,0.6,0c0.2-0.1,0.2-0.3,0.2-0.5l-0.4-1.1l0.8-0.6c0.2-0.1,0.2-0.3,0.2-0.5C6.4,20,6.2,19.9,6,19.9z M25.7,27.8\a   c3.2-2.9,5-6.8,5.2-11.1C31.3,7.9,24.5,0.4,15.7,0c-0.4,0-0.7,0.3-0.8,0.7c0,0.2,0.1,0.5,0.3,0.6c2.4,3,3.5,6.8,3.1,10.6\a   c-0.4,3.9-2.3,7.4-5.3,9.8C10.4,23.8,7.2,25,3.9,25c-0.4,0-1.5,0-2-0.1c-0.3-0.1-0.6,0.1-0.7,0.4c-0.1,0.3-0.1,0.6,0.1,0.8\a   c3.3,3.7,8,5.9,12.9,5.9c0.3,0,0.5,0,0.8,0C18.9,32,22.7,30.5,25.7,27.8z M3.9,26.4c3.6,0,7.2-1.3,10-3.6c3.3-2.7,5.4-6.5,5.8-10.8\a   c0.4-3.7-0.5-7.4-2.5-10.4c7.2,1.1,12.6,7.6,12.3,15.1c-0.4,8-7.2,14.2-15.3,13.9c-4,0-7.7-1.5-10.6-4.1C3.7,26.4,3.8,26.4,3.9,26.4\a   z' /%3E%3C/svg%3E")
}

.misc-menu-popup .misc-menu-item-share::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23333' stroke='transparent' stroke-width='0' style='' d='M28.2,31.4H3.8c-1.5,0-3.8-1.3-3.8-3.1V3.9c0-1.8,2.3-3,3.8-3H13c0.4,0,0.8,0.3,0.8,0.8c0,0,0,0,0,0l0,0\a   c0,0.4-0.3,0.8-0.8,0.8l0,0H3.8c-1,0-2.3,0.7-2.3,1.4v24.4c0,0.7,1.3,1.6,2.3,1.6h24.4c0.3,0,0.8,0,0.8-1.6v-9.8\a   c0-0.4,0.3-0.8,0.8-0.8l0,0l0,0c0.4,0,0.8,0.3,0.8,0.8l0,0v9.8C30.5,30.9,29.3,31.4,28.2,31.4C28.2,31.4,28.2,31.4,28.2,31.4z\a    M9.7,24.6c-0.4,0-0.7-0.3-0.7-0.7c0,0,0,0,0,0c0.1-5.7,1.8-10.1,5-13c3.7-3.3,9.3-4.6,16.7-3.9c0.4,0,0.7,0.4,0.7,0.8c0,0,0,0,0,0\a   l0,0c0,0.4-0.4,0.7-0.8,0.6C23.4,7.7,18.3,9,14.9,12c-2.9,2.5-4.4,6.1-4.5,11.8C10.4,24.2,10.1,24.5,9.7,24.6L9.7,24.6L9.7,24.6z\a    M24.8,14.2c-0.3-0.3-0.3-0.8,0-1.1c0,0,0,0,0,0l4.9-4.9c0.3-0.3,0.3-0.8,0-1.1l-4.9-5.2c-0.3-0.3-0.3-0.8,0-1.1c0,0,0,0,0,0l0,0\a   c0.3-0.3,0.8-0.3,1.1,0c0,0,0,0,0,0l5.9,6.3c0.3,0.3,0.3,0.8,0,1.1l-5.9,5.9C25.5,14.4,25.1,14.4,24.8,14.2\a   C24.8,14.1,24.8,14.1,24.8,14.2L24.8,14.2L24.8,14.2z' /%3E%3C/svg%3E")
}

.misc-menu-popup .misc-menu-item-comment::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23333' stroke='transparent' stroke-width='0' style='' d='M13.8,31.9c-0.4,0-0.9-0.1-1.2-0.3c-0.7-0.3-1.1-1-1.1-1.8v-4.6C4.8,24.7-0.3,18.9,0,12.2C0.3,5.6,5.6,0.3,12.2,0l7.7,0\a   C26.7,0.2,32.1,5.9,32,12.7c0,4.2-2.1,8.2-5.6,10.6c0,0-5.3,4.2-10,7.7C15.6,31.6,14.6,31.9,13.8,31.9z M19.8,1.5h-7.6\a   C6.4,1.7,1.7,6.4,1.4,12.2C1.2,18.4,6,23.7,12.2,23.9l0.7,0v6c0,0.2,0.1,0.4,0.3,0.5c0.5,0.2,1.5,0.1,2.4-0.6l0,0\a   c4.7-3.5,9.9-7.6,10-7.7c3.2-2.2,5-5.7,5-9.5C30.7,6.6,25.9,1.6,19.8,1.5z' /%3E%3C/svg%3E")
}

.misc-menu-popup .misc-menu-item-subscribe-collection::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23333' stroke='transparent' stroke-width='0' style='' d='M22.3,17.9c0,0.4-0.3,0.7-0.7,0.7h-4.9v4.9c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7v-4.9h-4.9c-0.4,0-0.7-0.3-0.7-0.7\a   s0.3-0.7,0.7-0.7h4.9v-4.9c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7v4.9h4.9C21.9,17.2,22.3,17.5,22.3,17.9z M31.2,18.8\a   c0-4.4-2.4-8.3-6.5-10.8l1.6-2.2l0-0.6l-0.5-0.4l-6.6,0.7l-2.5-4.8c-0.1-0.2-0.3-0.4-0.5-0.5L15.5,0l-2.8,5.4L6.3,4.7l-0.5,0\a   L5.5,5.5l0.2,0.4L7.3,8c-4.1,2.5-6.5,6.5-6.5,10.8C0.8,26.1,7.6,32,16,32C24.4,32,31.2,26.1,31.2,18.8z M13,6.9\a   c0.3,0,0.7-0.2,0.8-0.5l2.1-4.1L18,6.4c0.2,0.3,0.5,0.5,0.9,0.5l5.2-0.6l-1.6,2.1l0.7,0.4c4,2.2,6.5,5.9,6.5,10\a   c0,6.5-6.2,11.8-13.7,11.8c-7.6,0-13.7-5.3-13.7-11.8c0-4.1,2.4-7.8,6.4-10l0.7-0.4L7.8,6.3L13,6.9z M12.5,5.7\a   C12.5,5.7,12.5,5.7,12.5,5.7L12.5,5.7z M19.3,5.7L19.3,5.7C19.3,5.7,19.3,5.7,19.3,5.7z M16.5,1.2L16.5,1.2\a   C16.5,1.1,16.5,1.2,16.5,1.2z' /%3E%3C/svg%3E")
}

.collection-box {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  transition: transform 0.3s
}

.collection-box::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 0
}

.collection-box .collection-content-box {
  position: absolute;
  top: 0;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 42px 15px 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch
}

.collection-box .collection-info-box {
  padding-bottom: 50px
}

.collection-box .collection-info-box > .hd {
  display: flex;
  position: relative
}

.collection-box .collection-info-box .cover {
  width: 100px;
  height: 133.33333px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  flex: 0 0 auto
}

.collection-box .collection-info-box .detail-box {
  flex-grow: 1;
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

.collection-box .collection-info-box .detail-box.collection-on-progress .btn-subscribe-collection-toggle {
  display: block
}

.collection-box .collection-info-box .detail-box.collection-on-progress .name {
  padding-right: 100px
}

.collection-box .collection-info-box .name {
  font-size: 18px;
  color: #111;
  margin-bottom: 5px
}

.collection-box .collection-info-box .author {
  font-size: 11px;
  margin-bottom: 10px
}

.collection-box .collection-info-box .author > a {
  color: #666
}

.collection-box .collection-info-box .author .avatar {
  display: inline-block;
  vertical-align: middle;
  width: 25px;
  height: 25px;
  border-radius: 12.5px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
  margin-right: 7px
}

.collection-box .collection-info-box .stats-list {
  color: #666;
  font-size: 0;
  margin-top: auto;
  padding-bottom: 10px
}

.collection-box .collection-info-box .stats-item {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  width: 50%
}

.collection-box .collection-info-box .stats-item::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  margin-top: -2px;
  margin-right: 6px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%
}

.collection-box .collection-info-box .stats-item.stats-item-comment a {
  color: #666
}

.collection-box .collection-info-box .stats-item.stats-item-comment::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23666' stroke='transparent' stroke-width='0' style='' d='M13.8,31.9c-0.4,0-0.9-0.1-1.2-0.3c-0.7-0.3-1.1-1-1.1-1.8v-4.6C4.8,24.7-0.3,18.9,0,12.2C0.3,5.6,5.6,0.3,12.2,0l7.7,0\a   C26.7,0.2,32.1,5.9,32,12.7c0,4.2-2.1,8.2-5.6,10.6c0,0-5.3,4.2-10,7.7C15.6,31.6,14.6,31.9,13.8,31.9z M19.8,1.5h-7.6\a   C6.4,1.7,1.7,6.4,1.4,12.2C1.2,18.4,6,23.7,12.2,23.9l0.7,0v6c0,0.2,0.1,0.4,0.3,0.5c0.5,0.2,1.5,0.1,2.4-0.6l0,0\a   c4.7-3.5,9.9-7.6,10-7.7c3.2-2.2,5-5.7,5-9.5C30.7,6.6,25.9,1.6,19.8,1.5z' /%3E%3C/svg%3E")
}

.collection-box .collection-info-box .stats-item.stats-item-click::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23666' stroke='transparent' stroke-width='0' style='' d='M25.1,12.4l-0.1,0c-0.1,0-0.1,0-0.2,0c-0.2,0-0.5,0-0.7,0.1c-0.7-0.9-1.8-1.5-3-1.5c-0.3,0-0.6,0-0.9,0.1\a   c-0.7-0.9-1.8-1.5-3-1.5c0,0,0,0,0,0c0,0,0,0,0,0V8.5c0-1-0.4-2-1.1-2.7s-1.7-1.2-2.7-1.2c0,0-0.1,0-0.1,0c0,0,0,0,0,0\a   c-2.1,0-3.9,1.7-3.9,3.9V16c-0.6-0.5-1.4-0.7-2.2-0.7c0,0,0,0-0.1,0c-1.1,0-2.1,0.4-2.8,1.2c-0.8,0.8-1.2,1.8-1.2,2.9\a   c0,1,0.4,2,1.1,2.8l7.5,7.4c0.2,0.2,0.4,0.4,0.6,0.5c1.5,1.2,3.3,2,7,2c8.8,0,9.5-5.3,9.5-10.3v-5.3C28.9,14.2,27.2,12.5,25.1,12.4z\a    M27.7,21.7c0,4.8-0.6,9.2-8.3,9.2c-3.4,0-4.9-0.7-6.3-1.8c-0.2-0.1-0.3-0.2-0.5-0.4l-7.5-7.4c-0.5-0.5-0.8-1.2-0.8-2\a   c0-0.8,0.3-1.5,0.9-2c0.5-0.5,1.3-0.8,2-0.8c0,0,0,0,0,0c0.7,0,1.4,0.3,1.9,0.7l0.5,0.5c0.2,0.2,0.4,0.2,0.6,0.1\a   c0.2-0.1,0.4-0.3,0.4-0.5V8.5c0-1.5,1.2-2.7,2.8-2.7c0,0,0,0,0,0c0.7,0,1.4,0.3,1.9,0.8c0.5,0.5,0.8,1.2,0.7,1.9v1.8c0,0,0,0,0,0\a   c0,0,0,0,0,0v4.8c0,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.3,0.6-0.6v-4.3c0,0,0,0,0,0c0,0,0,0,0,0c0.8,0,1.6,0.4,2.1,1.1v4.7\a   c0,0.3,0.3,0.6,0.6,0.6s0.6-0.3,0.6-0.6v-4.3c0.2,0,0.4-0.1,0.6-0.1c0,0,0,0,0,0c0.9,0,1.7,0.4,2.1,1.1v4.3c0,0.3,0.3,0.6,0.6,0.6\a   c0.3,0,0.6-0.3,0.6-0.6v-4c0.2,0,0.3-0.1,0.5-0.1c0,0,0,0,0,0c0,0,0.1,0,0.2,0c1.5,0,2.6,1.3,2.6,2.7V21.7z M4.9,6.5\a   c0.9-4.4,5.2-7.2,9.6-6.3s7.2,5.2,6.3,9.6c-0.1,0.4-0.4,0.6-0.8,0.5c-0.4-0.1-0.6-0.4-0.5-0.8c0.1-0.4,0.1-0.9,0.1-1.4\a   c0-2.2-1-4.2-2.8-5.5c-3-2.2-7.3-1.6-9.5,1.4c-2.2,3-1.6,7.3,1.4,9.5c0.3,0.2,0.3,0.6,0.1,0.9c0,0,0,0,0,0c-0.2,0.3-0.6,0.4-0.9,0.1\a   v0C5.5,12.8,4.3,9.6,4.9,6.5z' /%3E%3C/svg%3E");
  width: 14px;
  height: 14px
}

.collection-box .collection-info-box .btn-subscribe-collection-toggle {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 90px;
  height: 35px;
  line-height: 35px;
  box-sizing: border-box;
  border: 0.5px solid #39c6d2;
  font-size: 12px;
  color: #39c6d2;
  border-radius: 17.5px;
  text-align: center
}

.collection-box .collection-info-box .btn-subscribe-collection-toggle::before {
  width: 17px;
  height: 17px;
  margin-right: 6px;
  margin-top: -4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M22.3,17.9c0,0.4-0.3,0.7-0.7,0.7h-4.9v4.9c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7v-4.9h-4.9c-0.4,0-0.7-0.3-0.7-0.7\a   s0.3-0.7,0.7-0.7h4.9v-4.9c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7v4.9h4.9C21.9,17.2,22.3,17.5,22.3,17.9z M31.2,18.8\a   c0-4.4-2.4-8.3-6.5-10.8l1.6-2.2l0-0.6l-0.5-0.4l-6.6,0.7l-2.5-4.8c-0.1-0.2-0.3-0.4-0.5-0.5L15.5,0l-2.8,5.4L6.3,4.7l-0.5,0\a   L5.5,5.5l0.2,0.4L7.3,8c-4.1,2.5-6.5,6.5-6.5,10.8C0.8,26.1,7.6,32,16,32C24.4,32,31.2,26.1,31.2,18.8z M13,6.9\a   c0.3,0,0.7-0.2,0.8-0.5l2.1-4.1L18,6.4c0.2,0.3,0.5,0.5,0.9,0.5l5.2-0.6l-1.6,2.1l0.7,0.4c4,2.2,6.5,5.9,6.5,10\a   c0,6.5-6.2,11.8-13.7,11.8c-7.6,0-13.7-5.3-13.7-11.8c0-4.1,2.4-7.8,6.4-10l0.7-0.4L7.8,6.3L13,6.9z M12.5,5.7\a   C12.5,5.7,12.5,5.7,12.5,5.7L12.5,5.7z M19.3,5.7L19.3,5.7C19.3,5.7,19.3,5.7,19.3,5.7z M16.5,1.2L16.5,1.2\a   C16.5,1.1,16.5,1.2,16.5,1.2z' /%3E%3C/svg%3E")
}

.collection-box .collection-info-box .btn-subscribe-collection-toggle.subscribed {
  border-color: #999;
  color: #999
}

.collection-box .collection-info-box .btn-subscribe-collection-toggle.subscribed::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23999' stroke='transparent' stroke-width='0' style='' d='M22.3,17.9c0,0.4-0.3,0.7-0.7,0.7h-4.9v4.9c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7v-4.9h-4.9c-0.4,0-0.7-0.3-0.7-0.7\a   s0.3-0.7,0.7-0.7h4.9v-4.9c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7v4.9h4.9C21.9,17.2,22.3,17.5,22.3,17.9z M31.2,18.8\a   c0-4.4-2.4-8.3-6.5-10.8l1.6-2.2l0-0.6l-0.5-0.4l-6.6,0.7l-2.5-4.8c-0.1-0.2-0.3-0.4-0.5-0.5L15.5,0l-2.8,5.4L6.3,4.7l-0.5,0\a   L5.5,5.5l0.2,0.4L7.3,8c-4.1,2.5-6.5,6.5-6.5,10.8C0.8,26.1,7.6,32,16,32C24.4,32,31.2,26.1,31.2,18.8z M13,6.9\a   c0.3,0,0.7-0.2,0.8-0.5l2.1-4.1L18,6.4c0.2,0.3,0.5,0.5,0.9,0.5l5.2-0.6l-1.6,2.1l0.7,0.4c4,2.2,6.5,5.9,6.5,10\a   c0,6.5-6.2,11.8-13.7,11.8c-7.6,0-13.7-5.3-13.7-11.8c0-4.1,2.4-7.8,6.4-10l0.7-0.4L7.8,6.3L13,6.9z M12.5,5.7\a   C12.5,5.7,12.5,5.7,12.5,5.7L12.5,5.7z M19.3,5.7L19.3,5.7C19.3,5.7,19.3,5.7,19.3,5.7z M16.5,1.2L16.5,1.2\a   C16.5,1.1,16.5,1.2,16.5,1.2z' /%3E%3C/svg%3E")
}

.collection-box .collection-info-box > .bd {
  padding-top: 15px;
  color: #111;
  font-size: 12px
}

.collection-box .collection-story-box {
  padding-bottom: 100px
}

.collection-box .collection-story-box > .hd {
  padding-bottom: 14px;
  border-bottom: 0.5px solid #f9f9f9
}

.collection-box .collection-story-box .collection-story-count {
  font-size: 11px;
  color: #999
}

.collection-box .collection-story-box .collection-story-count::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  margin-top: -2px;
  margin-right: 6px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23999' stroke='transparent' stroke-width='0' style='' d='M24.8,29.7H7.2c-4,0-7.2-3.2-7.2-7.2V9.5c0-4,3.2-7.2,7.2-7.2h17.6c4,0,7.2,3.2,7.2,7.2v12.9C32,26.5,28.8,29.7,24.8,29.7z\a    M7.2,3.8C4,3.7,1.4,6.3,1.4,9.5v12.9c0,3.2,2.6,5.8,5.8,5.8h17.6c3.2,0,5.8-2.6,5.8-5.8V9.5c0-3.2-2.6-5.8-5.8-5.8c0,0,0,0,0,0\a   L7.2,3.8L7.2,3.8z M25.7,10.5H7c-0.4,0-0.8-0.2-0.8-0.6c0-0.4,0.2-0.8,0.6-0.8c0.1,0,0.1,0,0.2,0h18.7c0.4,0,0.8,0.2,0.8,0.6\a   c0,0.4-0.2,0.8-0.6,0.8C25.8,10.5,25.7,10.5,25.7,10.5z M19.7,16.5H7c-0.4,0-0.8-0.2-0.8-0.6c0-0.4,0.2-0.8,0.6-0.8\a   c0.1,0,0.1,0,0.2,0h12.7c0.4,0,0.8,0.2,0.8,0.6c0,0.4-0.2,0.8-0.6,0.8C19.8,16.5,19.7,16.5,19.7,16.5z M15.6,22.9H7\a   c-0.4,0-0.7-0.4-0.6-0.8c0-0.3,0.3-0.6,0.6-0.6h8.7c0.4,0.1,0.7,0.4,0.6,0.8C16.2,22.6,16,22.8,15.6,22.9z' /%3E%3C/svg%3E")
}

.collection-box .collection-story-list.loading {
  position: relative
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg)
  }

  100% {
    -webkit-transform: rotate(360deg)
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

.collection-box .collection-story-list.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -7px;
  margin-left: -7px;
  width: 14px;
  height: 14px;
  border: 4px solid rgba(136, 136, 136, 0.7);
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: rotate 0.8s infinite linear;
  animation: rotate 0.8s infinite linear
}

.collection-box .collection-story-item {
  border-bottom: 0.5px solid #f9f9f9;
  position: relative
}

.collection-box .collection-story-item .story-item-link {
  text-decoration: none;
  height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.collection-box .collection-story-item .story-item-link > .hd {
  display: flex;
  line-height: 20px
}

.collection-box .collection-story-item .story-item-link > .bd {
  max-height: 40%
}

.collection-box .collection-story-item .story-name {
  font-size: 14px;
  color: #111;
  padding-right: 60px;
  flex-grow: 1
}

.collection-box .collection-story-item .story-misc-info {
  font-size: 11px;
  color: #666
}

.collection-box .collection-story-item .story-misc-info.locked {
  width: 18px;
  height: 18px;
  text-indent: -9999em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23666' stroke='transparent' stroke-width='0' style='' d='M16,32C9.3,32,3.9,26.6,3.9,19.9v-5.8c0-0.3,0.2-0.5,0.5-0.5h23.1c0.3,0,0.5,0.2,0.5,0.5v5.8C28.1,26.6,22.7,32,16,32z\a    M5,14.7v5.2c0,6.1,4.9,11,11,11c6.1,0,11-4.9,11-11v-5.2H5z M16,27.2c-1.9,0-3.4-1.5-3.4-3.4v-1.9c0-1.9,1.5-3.4,3.4-3.4\a   s3.4,1.5,3.4,3.4v1.9C19.4,25.6,17.9,27.2,16,27.2z M16,19.5c-1.3,0-2.3,1.1-2.3,2.3v1.9c0,1.3,1.1,2.3,2.3,2.3s2.3-1.1,2.3-2.3\a   v-1.9C18.3,20.5,17.3,19.5,16,19.5z M22.8,6.8C22.8,3,19.7,0,16,0c-3.7,0-6.8,3-6.8,6.8v7h1.1v-7c0-3.1,2.6-5.7,5.7-5.7\a   c3.1,0,5.7,2.6,5.7,5.7v7h1.1V6.8z' /%3E%3C/svg%3E") no-repeat 0 0;
  background-size: 100%
}

.collection-box .collection-story-item .story-desc {
  font-size: 11px;
  color: #999;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.collection-box .collection-box-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  text-align: center;
  padding-bottom: 34px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 60%, #fff);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

.collection-box .icon-scroll-up {
  display: inline-block;
  vertical-align: middle;
  width: 44px;
  height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M31.6,7.7c-0.5-0.5-1.4-0.5-1.9,0L16.1,21.5L2.3,7.8c-0.5-0.5-1.4-0.5-1.9,0\a   c-0.5,0.5-0.5,1.4,0,1.9l14.7,14.5c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0.3,0.3,0.6,0.4,0.9,0.4c0.3,0,0.7-0.1,0.9-0.4L31.6,9.6\a   C32.1,9.1,32.1,8.2,31.6,7.7' /%3E%3C/svg%3E");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: scaleY(-1)
}

.collection-has-subscribed-tips {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url("/static/hybrid/image/collection_subscribe_success_tips.png") no-repeat 50% 50%;
  background-size: 184px auto
}

.story-like-action-popup {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.11);
  display: flex;
  justify-content: center;
  align-items: center
}

.story-like-action-popup .story-like-action-list {
  display: flex;
  background: #fff;
  border-radius: 5px
}

.story-like-action-popup .story-like-action-list .sep {
  width: 0.5px;
  height: 37px;
  background: #f4f4f4;
  margin-top: 38px
}

.story-like-action-popup .story-like-action-item {
  width: 112px;
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

.story-like-action-popup .story-like-action-item::before {
  content: "";
  width: 43px;
  height: 43px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%
}

.story-like-action-popup .story-like-action-item::after {
  content: "";
  margin-top: 15px
}

.story-like-action-popup .story-like-action-item.actived {
  color: #39c6d2
}

.story-like-action-popup .story-like-action-item.action-like::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M15,30.3c-3,0-5.8-0.6-6.9-1.1C2.8,27-0.4,21.5,0.4,15.8c0.2-0.9,0.3-1.5,0.5-2.1C-0.8,4.5,0.3,2.6,1.2,2\a   c2.4-1.1,6,1.5,8.7,3.8c4-1,8.2-0.9,12.1,0.6c4.1-2.9,7-4,8.7-3c0.1,0,0.1,0.1,0.2,0.1c1.9,1.9,0.9,7.6-0.7,10.7\a   c1.3,4.8-1.1,9.2-2.4,10.9C24.7,29.2,19.6,30.3,15,30.3z M2.5,3.1c-0.2,0-0.5,0-0.6,0.1c-0.1,0-1.2,1,0.4,10.4c0,0.1,0,0.2,0,0.3\a   c-0.2,0.6-0.4,1.3-0.5,2.1C1.1,21,4,25.8,8.6,27.8c2.7,1.2,13.4,2.5,18-3.6c1-1.5,3.4-5.7,2.1-9.9c-0.1-0.2,0-0.4,0.1-0.6\a   c1.6-3.1,2.3-8.1,1.1-9.3C28.8,4,26,5.1,22.5,7.7c-0.2,0.1-0.5,0.2-0.7,0.1C18,6.3,13.9,6.2,10,7.2C9.7,7.3,9.5,7.2,9.3,7L8.9,6.9\a   C5.8,4.1,3.7,3.1,2.5,3.1z M20.5,23.6c1.4-1.4,2.2-3.3,2.3-5.4c0-0.4-0.3-0.8-0.7-0.8l0,0c-0.4,0-0.7,0.3-0.8,0.7\a   c0,1.6-0.7,3.2-1.8,4.4c-1.1,1.1-2.8,1.8-4.4,1.8l0,0C11.8,24.2,9,21.5,9,18c0-0.4-0.3-0.7-0.8-0.7l0,0c-0.4,0-0.7,0.3-0.7,0.8\a   c0,4.2,3.4,7.6,7.6,7.6l0,0C17,25.8,18.9,25.1,20.5,23.6z' /%3E%3C/svg%3E")
}

.story-like-action-popup .story-like-action-item.action-like::after {
  content: "赞一下"
}

.story-like-action-popup .story-like-action-item.action-like.actived::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M31,3.4c0,0-0.1-0.1-0.2-0.1c-1.6-1-4.6,0.1-8.8,3.1c-3.8-1.4-8.1-1.6-12.1-0.6C7.2,3.4,3.5,0.8,1.1,2\a   C0.2,2.5-0.8,4.4,0.9,13.6c-0.2,0.6-0.3,1.3-0.5,2.1C-0.3,21.4,2.9,27,8.2,29.2c1.2,0.6,3.9,1.1,7,1.1c4.4,0,9.7-1.1,12.8-5.3\a   c1.1-1.7,3.7-6.2,2.4-11C31.8,11,32.9,5.2,31,3.4z M15,25.8L15,25.8c-4.2,0-7.6-3.4-7.6-7.6c0-0.4,0.3-0.8,0.7-0.8l0,0\a   c0.4,0,0.7,0.3,0.8,0.7c0,3.4,2.8,6.2,6.2,6.2l0,0c1.6,0,3.2-0.7,4.4-1.8c1.1-1.1,1.8-2.8,1.8-4.4c0-0.4,0.3-0.7,0.8-0.7l0,0\a   c0.4,0,0.8,0.3,0.7,0.8c0,2-0.8,4-2.3,5.4C19,25.1,17,25.8,15,25.8z' /%3E%3C/svg%3E")
}

.story-like-action-popup .story-like-action-item.action-dislike::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M15,30.3c-3,0-5.8-0.6-6.9-1.1C2.8,27-0.4,21.5,0.4,15.8c0.2-0.9,0.3-1.5,0.5-2.1C-0.8,4.5,0.3,2.6,1.2,2\a   c2.4-1.1,6,1.5,8.7,3.8c4-1,8.2-0.9,12.1,0.6c4.1-2.9,7-4,8.7-3c0.1,0,0.1,0.1,0.2,0.1c1.9,1.9,0.9,7.6-0.7,10.7\a   c1.3,4.8-1.1,9.2-2.4,10.9C24.7,29.2,19.6,30.3,15,30.3z M2.5,3.1c-0.2,0-0.5,0-0.6,0.1c-0.1,0-1.2,1,0.4,10.4c0,0.1,0,0.2,0,0.3\a   c-0.2,0.6-0.4,1.3-0.5,2.1C1.1,21,4,25.8,8.6,27.8c2.7,1.2,13.4,2.5,18-3.6c1-1.5,3.4-5.7,2.1-9.9c-0.1-0.2,0-0.4,0.1-0.6\a   c1.6-3.1,2.3-8.1,1.1-9.3C28.8,4,26,5.1,22.5,7.7c-0.2,0.1-0.5,0.2-0.7,0.1C18,6.3,13.9,6.2,10,7.2C9.7,7.3,9.5,7.2,9.3,7L8.9,6.9\a   C5.8,4.1,3.7,3.1,2.5,3.1z M22,25.8c0.4,0,0.8-0.3,0.7-0.8c0-4.2-3.4-7.6-7.6-7.6l0,0c-4.2,0-7.6,3.4-7.6,7.6c0,0.4,0.3,0.8,0.7,0.8\a   l0,0c0.4,0,0.7-0.3,0.8-0.7c0-3.4,2.8-6.2,6.2-6.2l0,0c3.4,0,6.2,2.8,6.2,6.2C21.2,25.5,21.6,25.8,22,25.8L22,25.8z' /%3E%3C/svg%3E")
}

.story-like-action-popup .story-like-action-item.action-dislike::after {
  content: "踩一下"
}

.story-like-action-popup .story-like-action-item.action-dislike.actived::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M31,3.4c0,0-0.1-0.1-0.2-0.1c-1.6-1-4.6,0.1-8.8,3.1c-3.8-1.4-8.1-1.6-12.1-0.6C7.2,3.4,3.5,0.8,1.1,2\a   C0.2,2.5-0.8,4.4,0.9,13.6c-0.2,0.6-0.3,1.3-0.5,2.1C-0.3,21.4,2.9,27,8.2,29.2c1.2,0.6,3.9,1.1,7,1.1c4.4,0,9.7-1.1,12.8-5.3\a   c1.1-1.7,3.7-6.2,2.4-11C31.8,11,32.9,5.2,31,3.4z M22.1,25.8c-0.4,0-0.7-0.3-0.8-0.7c0-3.4-2.8-6.2-6.2-6.2l0,0\a   c-3.4,0-6.2,2.8-6.2,6.2c0,0.4-0.3,0.7-0.8,0.7l0,0c-0.4,0-0.7-0.3-0.7-0.8c0-4.2,3.4-7.6,7.6-7.6l0,0c4.2,0,7.6,3.4,7.6,7.6\a   C22.7,25.5,22.5,25.8,22.1,25.8L22.1,25.8z' /%3E%3C/svg%3E")
}

.night-mode .story-main-box .story-end-actions .author-info-box {
  background: #232323
}

.night-mode .story-main-box .story-end-actions .author-info-box .author-name {
  color: #fff
}

.night-mode .story-main-box .story-end-action-item .action-item-content {
  border-color: #0c0c0c
}

.night-mode .story-main-box .btn-subscribe-collection-toggle {
  border-color: #0c0c0c
}

.night-mode .story-main-box .story-end-share-item {
  background-color: #333
}

.night-mode .story-main-box .story-end-share-item.tapped {
  background-color: #282828
}

.night-mode .story-main-box .recommend-story-bd .story-bg-mask {
  background: rgba(0, 0, 0, 0.79)
}

.night-mode .story-main-box .recommend-story-bd .story-intro .title {
  color: #fff
}

.night-mode .story-main-box .recommend-story-bd .story-intro .chapter {
  color: #d2d2d2
}

.night-mode .story-main-box .recommend-story-bd .story-intro .chapter::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23d2d2d2' stroke='transparent' stroke-width='0' style='' d='M24.8,29.7H7.2c-4,0-7.2-3.2-7.2-7.2V9.5c0-4,3.2-7.2,7.2-7.2h17.6c4,0,7.2,3.2,7.2,7.2v12.9C32,26.5,28.8,29.7,24.8,29.7z\a    M7.2,3.8C4,3.7,1.4,6.3,1.4,9.5v12.9c0,3.2,2.6,5.8,5.8,5.8h17.6c3.2,0,5.8-2.6,5.8-5.8V9.5c0-3.2-2.6-5.8-5.8-5.8c0,0,0,0,0,0\a   L7.2,3.8L7.2,3.8z M25.7,10.5H7c-0.4,0-0.8-0.2-0.8-0.6c0-0.4,0.2-0.8,0.6-0.8c0.1,0,0.1,0,0.2,0h18.7c0.4,0,0.8,0.2,0.8,0.6\a   c0,0.4-0.2,0.8-0.6,0.8C25.8,10.5,25.7,10.5,25.7,10.5z M19.7,16.5H7c-0.4,0-0.8-0.2-0.8-0.6c0-0.4,0.2-0.8,0.6-0.8\a   c0.1,0,0.1,0,0.2,0h12.7c0.4,0,0.8,0.2,0.8,0.6c0,0.4-0.2,0.8-0.6,0.8C19.8,16.5,19.7,16.5,19.7,16.5z M15.6,22.9H7\a   c-0.4,0-0.7-0.4-0.6-0.8c0-0.3,0.3-0.6,0.6-0.6h8.7c0.4,0.1,0.7,0.4,0.6,0.8C16.2,22.6,16,22.8,15.6,22.9z' /%3E%3C/svg%3E")
}

.night-mode .navigation-bar {
  background: rgba(0, 0, 0, 0.79)
}

.night-mode .navigation-bar .bar-title-wrap::after {
  border-top-color: #39c6d2
}

.night-mode .navigation-bar .bar-button-item-story-back {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M24.3,32c-0.2,0-0.4-0.1-0.5-0.2L7.2,16.2c-0.3-0.3-0.3-0.7,0-1c0,0,0,0,0,0L23.9,0.2c0.3-0.3,0.8-0.3,1,0s0.3,0.8,0,1\a   L8.7,15.7l16.1,15.1c0.3,0.3,0.3,0.7,0,1C24.7,31.9,24.5,32,24.3,32z' /%3E%3C/svg%3E")
}

.night-mode .navigation-bar .bar-button-item-misc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M2.8,13.2c1.6,0,2.8,1.3,2.8,2.8s-1.3,2.8-2.8,2.8S0,17.6,0,16S1.3,13.2,2.8,13.2z M16.1,13.2c1.6,0,2.8,1.3,2.8,2.8\a   s-1.3,2.8-2.8,2.8s-2.8-1.3-2.8-2.8S14.6,13.2,16.1,13.2z M29.2,13.2c1.6,0,2.8,1.3,2.8,2.8s-1.3,2.8-2.8,2.8s-2.8-1.3-2.8-2.8\a   S27.6,13.2,29.2,13.2z' /%3E%3C/svg%3E")
}

.night-mode .navigation-bar .title-info-story-name {
  color: #39c6d2
}

.night-mode .navigation-bar .title-info-story-chapters {
  color: #158f99
}

.night-mode .misc-menu-popup .misc-menu-list {
  background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0.79) 30%, rgba(0, 0, 0, 0.79))
}

.night-mode .misc-menu-popup .misc-menu-list::before {
  border-bottom-color: #000
}

.night-mode .misc-menu-popup .misc-menu-item {
  color: #999;
  border-color: #282828
}

.night-mode .misc-menu-popup .misc-menu-item-chapter::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M24.8,32H7.2c-4,0-7.2-3.2-7.2-7.2V7.2C0,3.2,3.2,0,7.2,0h17.6c4,0,7.2,3.2,7.2,7.2v17.6C32,28.8,28.8,32,24.8,32z M7.2,1.4\a   C4,1.4,1.4,4,1.4,7.2v17.6c0,3.2,2.6,5.8,5.8,5.8h17.6c3.2,0,5.8-2.6,5.8-5.8V7.2c0-3.2-2.6-5.8-5.8-5.8H7.2z M26.4,9.8\a   c0-0.4-0.3-0.7-0.7-0.7H7c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7h18.7C26.1,10.5,26.4,10.2,26.4,9.8z M20.4,15.8\a   c0-0.4-0.3-0.7-0.7-0.7H7c-0.4,0-0.7,0.3-0.7,0.7s0.3,0.7,0.7,0.7h12.7C20.1,16.5,20.4,16.2,20.4,15.8z M16.3,22.1\a   c0-0.4-0.3-0.7-0.7-0.7H7c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7h8.7C16,22.9,16.3,22.5,16.3,22.1z' /%3E%3C/svg%3E")
}

.night-mode .misc-menu-popup .misc-menu-item-night-mode::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M6.8,8.2c0.4,0.4,1,0.4,1.4,0s0.4-1,0-1.4L6.1,4.7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4L6.8,8.2 M25.6,7.8\a   l2.1-2.1c0.4-0.3,0.5-1,0.2-1.4s-1-0.5-1.4-0.2c-0.1,0.1-0.1,0.1-0.2,0.2l-2.1,2.1c-0.4,0.3-0.5,1-0.2,1.4s1,0.5,1.4,0.2\a   C25.5,7.9,25.6,7.9,25.6,7.8 M16,5c0.6,0,1-0.4,1-1V1c0-0.6-0.4-1-1-1s-1,0.4-1,1v3C15,4.6,15.4,5,16,5L16,5 M4,15H1\a   c-0.6,0-1,0.4-1,1s0.4,1,1,1h3c0.6,0,1-0.4,1-1S4.6,15,4,15 M16,7c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S21,7,16,7L16,7 M31,15h-3\a   c-0.6,0-1,0.4-1,1s0.4,1,1,1h3c0.6,0,1-0.4,1-1S31.6,15,31,15 M25.2,23.8c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l2.1,2.1\a   c0.4,0.4,1,0.4,1.4,0s0.4-1,0-1.4L25.2,23.8L25.2,23.8 M7.5,23.2l-2.1,2.1c-0.3,0.4-0.2,1.1,0.2,1.4c0.4,0.3,0.8,0.3,1.2,0l2.1-2.1\a   c0.3-0.4,0.2-1.1-0.2-1.4C8.3,22.9,7.8,22.9,7.5,23.2 M16,27c-0.6,0-1,0.4-1,1v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3\a   C17,27.4,16.6,27,16,27 M16,27L16,27z' /%3E%3C/svg%3E")
}

.night-mode .misc-menu-popup .misc-menu-item-share::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M28.2,31.4H3.8c-1.5,0-3.8-1.3-3.8-3.1V3.9c0-1.8,2.3-3,3.8-3H13c0.4,0,0.8,0.3,0.8,0.8c0,0,0,0,0,0l0,0\a   c0,0.4-0.3,0.8-0.8,0.8l0,0H3.8c-1,0-2.3,0.7-2.3,1.4v24.4c0,0.7,1.3,1.6,2.3,1.6h24.4c0.3,0,0.8,0,0.8-1.6v-9.8\a   c0-0.4,0.3-0.8,0.8-0.8l0,0l0,0c0.4,0,0.8,0.3,0.8,0.8l0,0v9.8C30.5,30.9,29.3,31.4,28.2,31.4C28.2,31.4,28.2,31.4,28.2,31.4z\a    M9.7,24.6c-0.4,0-0.7-0.3-0.7-0.7c0,0,0,0,0,0c0.1-5.7,1.8-10.1,5-13c3.7-3.3,9.3-4.6,16.7-3.9c0.4,0,0.7,0.4,0.7,0.8c0,0,0,0,0,0\a   l0,0c0,0.4-0.4,0.7-0.8,0.6C23.4,7.7,18.3,9,14.9,12c-2.9,2.5-4.4,6.1-4.5,11.8C10.4,24.2,10.1,24.5,9.7,24.6L9.7,24.6L9.7,24.6z\a    M24.8,14.2c-0.3-0.3-0.3-0.8,0-1.1c0,0,0,0,0,0l4.9-4.9c0.3-0.3,0.3-0.8,0-1.1l-4.9-5.2c-0.3-0.3-0.3-0.8,0-1.1c0,0,0,0,0,0l0,0\a   c0.3-0.3,0.8-0.3,1.1,0c0,0,0,0,0,0l5.9,6.3c0.3,0.3,0.3,0.8,0,1.1l-5.9,5.9C25.5,14.4,25.1,14.4,24.8,14.2\a   C24.8,14.1,24.8,14.1,24.8,14.2L24.8,14.2L24.8,14.2z' /%3E%3C/svg%3E")
}

.night-mode .misc-menu-popup .misc-menu-item-comment::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M13.8,31.9c-0.4,0-0.9-0.1-1.2-0.3c-0.7-0.3-1.1-1-1.1-1.8v-4.6C4.8,24.7-0.3,18.9,0,12.2C0.3,5.6,5.6,0.3,12.2,0l7.7,0\a   C26.7,0.2,32.1,5.9,32,12.7c0,4.2-2.1,8.2-5.6,10.6c0,0-5.3,4.2-10,7.7C15.6,31.6,14.6,31.9,13.8,31.9z M19.8,1.5h-7.6\a   C6.4,1.7,1.7,6.4,1.4,12.2C1.2,18.4,6,23.7,12.2,23.9l0.7,0v6c0,0.2,0.1,0.4,0.3,0.5c0.5,0.2,1.5,0.1,2.4-0.6l0,0\a   c4.7-3.5,9.9-7.6,10-7.7c3.2-2.2,5-5.7,5-9.5C30.7,6.6,25.9,1.6,19.8,1.5z' /%3E%3C/svg%3E")
}

.night-mode .misc-menu-popup .misc-menu-item-subscribe-collection::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M22.3,17.9c0,0.4-0.3,0.7-0.7,0.7h-4.9v4.9c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7v-4.9h-4.9c-0.4,0-0.7-0.3-0.7-0.7\a   s0.3-0.7,0.7-0.7h4.9v-4.9c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7v4.9h4.9C21.9,17.2,22.3,17.5,22.3,17.9z M31.2,18.8\a   c0-4.4-2.4-8.3-6.5-10.8l1.6-2.2l0-0.6l-0.5-0.4l-6.6,0.7l-2.5-4.8c-0.1-0.2-0.3-0.4-0.5-0.5L15.5,0l-2.8,5.4L6.3,4.7l-0.5,0\a   L5.5,5.5l0.2,0.4L7.3,8c-4.1,2.5-6.5,6.5-6.5,10.8C0.8,26.1,7.6,32,16,32C24.4,32,31.2,26.1,31.2,18.8z M13,6.9\a   c0.3,0,0.7-0.2,0.8-0.5l2.1-4.1L18,6.4c0.2,0.3,0.5,0.5,0.9,0.5l5.2-0.6l-1.6,2.1l0.7,0.4c4,2.2,6.5,5.9,6.5,10\a   c0,6.5-6.2,11.8-13.7,11.8c-7.6,0-13.7-5.3-13.7-11.8c0-4.1,2.4-7.8,6.4-10l0.7-0.4L7.8,6.3L13,6.9z M12.5,5.7\a   C12.5,5.7,12.5,5.7,12.5,5.7L12.5,5.7z M19.3,5.7L19.3,5.7C19.3,5.7,19.3,5.7,19.3,5.7z M16.5,1.2L16.5,1.2\a   C16.5,1.1,16.5,1.2,16.5,1.2z' /%3E%3C/svg%3E")
}

.night-mode .collection-box::before {
  background: rgba(0, 0, 0, 0.7)
}

.night-mode .collection-box .collection-info-box .name {
  color: #fff
}

.night-mode .collection-box .collection-info-box .author > a {
  color: #d2d2d2
}

.night-mode .collection-box .collection-info-box .stats-list {
  color: #d2d2d2
}

.night-mode .collection-box .collection-info-box .stats-item.stats-item-comment a {
  color: #d2d2d2
}

.night-mode .collection-box .collection-info-box .stats-item.stats-item-comment::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23d2d2d2' stroke='transparent' stroke-width='0' style='' d='M13.8,31.9c-0.4,0-0.9-0.1-1.2-0.3c-0.7-0.3-1.1-1-1.1-1.8v-4.6C4.8,24.7-0.3,18.9,0,12.2C0.3,5.6,5.6,0.3,12.2,0l7.7,0\a   C26.7,0.2,32.1,5.9,32,12.7c0,4.2-2.1,8.2-5.6,10.6c0,0-5.3,4.2-10,7.7C15.6,31.6,14.6,31.9,13.8,31.9z M19.8,1.5h-7.6\a   C6.4,1.7,1.7,6.4,1.4,12.2C1.2,18.4,6,23.7,12.2,23.9l0.7,0v6c0,0.2,0.1,0.4,0.3,0.5c0.5,0.2,1.5,0.1,2.4-0.6l0,0\a   c4.7-3.5,9.9-7.6,10-7.7c3.2-2.2,5-5.7,5-9.5C30.7,6.6,25.9,1.6,19.8,1.5z' /%3E%3C/svg%3E")
}

.night-mode .collection-box .collection-info-box .stats-item.stats-item-click::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23d2d2d2' stroke='transparent' stroke-width='0' style='' d='M25.1,12.4l-0.1,0c-0.1,0-0.1,0-0.2,0c-0.2,0-0.5,0-0.7,0.1c-0.7-0.9-1.8-1.5-3-1.5c-0.3,0-0.6,0-0.9,0.1\a   c-0.7-0.9-1.8-1.5-3-1.5c0,0,0,0,0,0c0,0,0,0,0,0V8.5c0-1-0.4-2-1.1-2.7s-1.7-1.2-2.7-1.2c0,0-0.1,0-0.1,0c0,0,0,0,0,0\a   c-2.1,0-3.9,1.7-3.9,3.9V16c-0.6-0.5-1.4-0.7-2.2-0.7c0,0,0,0-0.1,0c-1.1,0-2.1,0.4-2.8,1.2c-0.8,0.8-1.2,1.8-1.2,2.9\a   c0,1,0.4,2,1.1,2.8l7.5,7.4c0.2,0.2,0.4,0.4,0.6,0.5c1.5,1.2,3.3,2,7,2c8.8,0,9.5-5.3,9.5-10.3v-5.3C28.9,14.2,27.2,12.5,25.1,12.4z\a    M27.7,21.7c0,4.8-0.6,9.2-8.3,9.2c-3.4,0-4.9-0.7-6.3-1.8c-0.2-0.1-0.3-0.2-0.5-0.4l-7.5-7.4c-0.5-0.5-0.8-1.2-0.8-2\a   c0-0.8,0.3-1.5,0.9-2c0.5-0.5,1.3-0.8,2-0.8c0,0,0,0,0,0c0.7,0,1.4,0.3,1.9,0.7l0.5,0.5c0.2,0.2,0.4,0.2,0.6,0.1\a   c0.2-0.1,0.4-0.3,0.4-0.5V8.5c0-1.5,1.2-2.7,2.8-2.7c0,0,0,0,0,0c0.7,0,1.4,0.3,1.9,0.8c0.5,0.5,0.8,1.2,0.7,1.9v1.8c0,0,0,0,0,0\a   c0,0,0,0,0,0v4.8c0,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.3,0.6-0.6v-4.3c0,0,0,0,0,0c0,0,0,0,0,0c0.8,0,1.6,0.4,2.1,1.1v4.7\a   c0,0.3,0.3,0.6,0.6,0.6s0.6-0.3,0.6-0.6v-4.3c0.2,0,0.4-0.1,0.6-0.1c0,0,0,0,0,0c0.9,0,1.7,0.4,2.1,1.1v4.3c0,0.3,0.3,0.6,0.6,0.6\a   c0.3,0,0.6-0.3,0.6-0.6v-4c0.2,0,0.3-0.1,0.5-0.1c0,0,0,0,0,0c0,0,0.1,0,0.2,0c1.5,0,2.6,1.3,2.6,2.7V21.7z M4.9,6.5\a   c0.9-4.4,5.2-7.2,9.6-6.3s7.2,5.2,6.3,9.6c-0.1,0.4-0.4,0.6-0.8,0.5c-0.4-0.1-0.6-0.4-0.5-0.8c0.1-0.4,0.1-0.9,0.1-1.4\a   c0-2.2-1-4.2-2.8-5.5c-3-2.2-7.3-1.6-9.5,1.4c-2.2,3-1.6,7.3,1.4,9.5c0.3,0.2,0.3,0.6,0.1,0.9c0,0,0,0,0,0c-0.2,0.3-0.6,0.4-0.9,0.1\a   v0C5.5,12.8,4.3,9.6,4.9,6.5z' /%3E%3C/svg%3E")
}

.night-mode .collection-box .collection-info-box > .bd {
  color: #fff
}

.night-mode .collection-box .collection-story-box > .hd {
  border-bottom-color: #333
}

.night-mode .collection-box .collection-story-box .collection-story-count {
  color: #fff
}

.night-mode .collection-box .collection-story-box .collection-story-count::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' stroke='transparent' stroke-width='0' style='' d='M24.8,29.7H7.2c-4,0-7.2-3.2-7.2-7.2V9.5c0-4,3.2-7.2,7.2-7.2h17.6c4,0,7.2,3.2,7.2,7.2v12.9C32,26.5,28.8,29.7,24.8,29.7z\a    M7.2,3.8C4,3.7,1.4,6.3,1.4,9.5v12.9c0,3.2,2.6,5.8,5.8,5.8h17.6c3.2,0,5.8-2.6,5.8-5.8V9.5c0-3.2-2.6-5.8-5.8-5.8c0,0,0,0,0,0\a   L7.2,3.8L7.2,3.8z M25.7,10.5H7c-0.4,0-0.8-0.2-0.8-0.6c0-0.4,0.2-0.8,0.6-0.8c0.1,0,0.1,0,0.2,0h18.7c0.4,0,0.8,0.2,0.8,0.6\a   c0,0.4-0.2,0.8-0.6,0.8C25.8,10.5,25.7,10.5,25.7,10.5z M19.7,16.5H7c-0.4,0-0.8-0.2-0.8-0.6c0-0.4,0.2-0.8,0.6-0.8\a   c0.1,0,0.1,0,0.2,0h12.7c0.4,0,0.8,0.2,0.8,0.6c0,0.4-0.2,0.8-0.6,0.8C19.8,16.5,19.7,16.5,19.7,16.5z M15.6,22.9H7\a   c-0.4,0-0.7-0.4-0.6-0.8c0-0.3,0.3-0.6,0.6-0.6h8.7c0.4,0.1,0.7,0.4,0.6,0.8C16.2,22.6,16,22.8,15.6,22.9z' /%3E%3C/svg%3E")
}

.night-mode .collection-box .collection-story-item {
  border-bottom-color: #333
}

.night-mode .collection-box .collection-story-item .story-name {
  color: #39c6d2
}

.night-mode .collection-box .collection-story-item .story-misc-info {
  color: #fff
}

.night-mode .collection-box .collection-story-item .story-misc-info.locked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' stroke='transparent' stroke-width='0' style='' d='M16,32C9.3,32,3.9,26.6,3.9,19.9v-5.8c0-0.3,0.2-0.5,0.5-0.5h23.1c0.3,0,0.5,0.2,0.5,0.5v5.8C28.1,26.6,22.7,32,16,32z\a    M5,14.7v5.2c0,6.1,4.9,11,11,11c6.1,0,11-4.9,11-11v-5.2H5z M16,27.2c-1.9,0-3.4-1.5-3.4-3.4v-1.9c0-1.9,1.5-3.4,3.4-3.4\a   s3.4,1.5,3.4,3.4v1.9C19.4,25.6,17.9,27.2,16,27.2z M16,19.5c-1.3,0-2.3,1.1-2.3,2.3v1.9c0,1.3,1.1,2.3,2.3,2.3s2.3-1.1,2.3-2.3\a   v-1.9C18.3,20.5,17.3,19.5,16,19.5z M22.8,6.8C22.8,3,19.7,0,16,0c-3.7,0-6.8,3-6.8,6.8v7h1.1v-7c0-3.1,2.6-5.7,5.7-5.7\a   c3.1,0,5.7,2.6,5.7,5.7v7h1.1V6.8z' /%3E%3C/svg%3E")
}

.night-mode .collection-box .collection-story-item .story-desc {
  color: #999
}

.night-mode .collection-box .collection-box-footer {
  background: linear-gradient(to bottom, transparent, #000 60%, #000)
}

.night-mode .collection-box .icon-scroll-up {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2339c6d2' stroke='transparent' stroke-width='0' style='' d='M31.6,7.7c-0.5-0.5-1.4-0.5-1.9,0L16.1,21.5L2.3,7.8c-0.5-0.5-1.4-0.5-1.9,0\a   c-0.5,0.5-0.5,1.4,0,1.9l14.7,14.5c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0.3,0.3,0.6,0.4,0.9,0.4c0.3,0,0.7-0.1,0.9-0.4L31.6,9.6\a   C32.1,9.1,32.1,8.2,31.6,7.7' /%3E%3C/svg%3E")
}

@media (max-width: 374px) {
  .story-main-box .story-end-action-item .action-item-content {
    padding: 0 15px
  }
}

.story-main-box .story-dialog-item {
  display: block;
  overflow: hidden
}

.story-main-box .story-dialog-item.left .avatar, .story-main-box .story-dialog-item.left .content-box {
  float: left
}

.story-main-box .story-dialog-item.right .avatar, .story-main-box .story-dialog-item.right .content-box {
  float: right
}

.story-main-box .story-dialog-item .content-box {
  overflow: hidden;
  max-width: 80%
}

.story-main-box .story-dialog-item .message-content-box {
  display: block
}

.story-main-box .story-dialog-item .message-bubble-wrap {
  max-width: none
}

.ui-popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  text-align: center
}

.ui-popup:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 100%;
  vertical-align: middle;
  visibility: hidden;
  overflow: hidden
}

.ui-popup .ui-popup-panel {
  margin-left: -1px;
  display: inline-block;
  vertical-align: middle;
  width: 95%;
  padding: 0 20px;
  box-sizing: border-box
}

.ui-popup .ui-popup-content {
  position: relative
}

.ui-popup .ui-popup-title {
  display: none;
  padding-top: 20px;
  font-size: 18px
}

.ui-popup .ui-popup-btn-close {
  display: none;
  position: absolute;
  top: -7px;
  right: 10px;
  font-size: 26px;
  font-weight: lighter;
  color: #fff;
  cursor: pointer
}

.story-main-box .story-dialog-item, .story-main-box .story-dialog-misc-item {
  display: none
}

.story-main-box .story-dialog-misc-item .text {
  display: inline-block
}

.story-main-box .story-dialog-list {
  padding-top: 60px
}

.story-main-box .guide-story-click {
  display: block
}

.story-end-popup {
  display: none
}

.story-end-popup.ui-popup {
  background: rgba(0, 0, 0, 0.5)
}

.story-end-popup .logo {
  width: 90px;
  height: 90px;
  border-radius: 16px;
  position: absolute;
  left: 50%;
  margin-left: -45px;
  top: -40px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.09);
  background: url("/static/image/web/index/applogo100.png") no-repeat 0 0;
  background-image: -webkit-image-set(url("/static/image/web/index/applogo100.png") 1x, url("/static/image/web/index/applogo100@2x.png") 2x);
  background-size: 100%;
  text-indent: -9999em
}

.story-end-popup-box {
  padding: 88px 37px 37px;
  background: #fff url("/static/image/api/invite/pattern1_bg.png");
  background-image: -webkit-image-set(url("/static/image/api/invite/pattern1_bg.png") 1x, url("/static/image/api/invite/pattern1_bg@2x.png") 2x, url("/static/image/api/invite/pattern1_bg@3x.png") 3x);
  border-radius: 4px;
  overflow: hidden
}

.story-end-popup-box .title {
  font-size: 20px;
  line-height: 1;
  color: #111;
  padding-bottom: 19px
}

.story-end-popup-box .tips {
  font-size: 15px;
  line-height: 1;
  color: #999;
  padding-bottom: 55px
}

.jumplink-guide-tips {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 92px;
  font-size: 14px;
  background: #15A06A;
  color: #fff;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  flex-direction: column;
  padding: 0 40px 0 90px;
  text-align: left
}

.jumplink-guide-tips::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  margin-top: -32px;
  width: 64px;
  height: 65px;
  background: url("/static/image/web/2017/star/star_share_cat.png") no-repeat 0 0;
  background-size: 100%
}

.jumplink-guide-tips::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -34px;
  right: 40px;
  width: 22px;
  height: 68px;
  background: url("/static/image/web/2017/star/share_guide_arrow.png") no-repeat 0 0;
  background-size: 100%
}

.jumplink-guide-tips h6 {
  font-size: 18px
}

.btn-app-download {
  display: block;
  height: 50px;
  line-height: 50px;
  border-radius: 25px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: #39c6d2
}

.top-download-tips {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0
}

.top-download-tips > a {
  text-decoration: none
}

.footer-download-box {
  position: relative;
  height: 50px;
  background: #39c6d2;
  color: #fff;
  font-size: 0;
  padding: 0 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  text-decoration: none
}

.footer-download-box .logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-right: 8px;
  background: url("/static/image/web/index/applogo100.png") no-repeat 0 0;
  background-image: -webkit-image-set(url("/static/image/web/index/applogo100.png") 1x, url("/static/image/web/index/applogo100@2x.png") 2x);
  background-size: 100%
}

.footer-download-box .tips {
  font-size: 14px;
  color: #fff;
  line-height: 1.4;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto
}

.footer-download-box .btn-download {
  height: 30px;
  line-height: 30px;
  color: #111;
  background: #fff;
  border: 2px solid #111;
  border-radius: 5px;
  font-size: 14px;
  padding: 0 10px;
  text-decoration: none
}

@media (max-width: 320px) {
  .footer-download-box .tips {
    font-size: 12px
  }
}

@media (max-width: 374px) {
  .jumplink-guide-tips {
    padding-left: 80px;
    font-size: 13px
  }

  .jumplink-guide-tips::after {
    right: 30px
  }

  .jumplink-guide-tips h6 {
    font-size: 16px
  }
}


